/* Pathminder host portal -- styles that belong to the portal alone.
 *
 * WHAT GOES HERE
 * The design system itself is design_system/static/design_system/css/finder.css,
 * vendored from PM1 and never edited in this repo (see design_system/VENDORED.md),
 * and additions.css beside it: design-system components PM1 has not built yet (the
 * status banner). This file is loaded after both and holds only:
 *
 *   1. token overrides the portal needs (its dark navbar, as the design system's
 *      .theme-pathminder; the 52px button);
 *   2. the few layouts the portal has and the finder does not (blocks named hp-*,
 *      for "host portal", so they can never collide with a pm-* block added to the
 *      vendored file later);
 *   3. adjustments to pm-* components where the host portal handoff differs from
 *      the finder -- each one says why.
 *
 * THE RULES ARE THE DESIGN SYSTEM'S (Design Standards -> Tokens)
 *   - Every literal appears exactly once, in a token definition in the :root block
 *     below. A hex or a px value in a rule is a bug.
 *   - Tokens name the job, not the appearance.
 *   - Space siblings with `gap`, never with margins.
 *   - Hover rules sit inside @media (hover: hover); :active repeats the hover values
 *     outside it, because on a touch screen it is the only feedback a tap gets.
 *
 * ONE BREAKPOINT, 768px. Phone rules are `@media (max-width: 767px)`, as in the
 * vendored stylesheet. The few `not all and (max-width: 767px)` blocks are the same
 * breakpoint from the other side: a desktop-only arrangement, written that way where
 * the vendored stylesheet's own phone rules must be left to apply untouched. `not`,
 * rather than `min-width: 768px`, so that the two are exact opposites: at a width
 * like 767.5px (a zoomed browser) neither of that pair would apply.
 *
 * MEASURED AGAINST THE HANDOFF. The designer's mocks render from disk, so each
 * screen's values here were checked by listing everything drawn in the mock and in
 * the build -- every box, line of text, icon and image, with its position, size,
 * type and ink -- and comparing the two lists (docs/plans/host-portal-decisions.md,
 * "Measured conformance"). Where the mock and PM1's stylesheet disagree about a
 * shared component (navbar, footer, list row), the mock is followed and the rule
 * says so.
 *
 * TOKEN DIALECT
 * PM1's type tokens are weight/size/line-height only, so a rule appends the family:
 *     font: var(--type-meta) var(--font-text);
 * (The designer's own token files bake the family in. They are not interchangeable.)
 */

:root {
  /* ---- Buttons: every button is 52px.
   * The designer's drop 2 made --size-cta an alias of --size-button. PM1's stylesheet
   * still defines it as 54px; remove this line once PM1 adopts the drop and the
   * vendored file is re-synced. */
  --size-cta: var(--size-button);

  /* ---- Front-door band (the pm-intro component), to the handoff's measurements:
   * a taller band and a deeper overlap than the finder's intro. */
  --size-intro-band-first: 280px;
  --size-intro-band-first-mobile: 180px;
  --space-intro-overlap: 124px;       /* clear of where the paths merge (handoff drop 12) */
  --space-intro-overlap-mobile: 76px;

  /* ---- Portal-only values (hp-*). */
  --hp-size-nav-logo: 36px;            /* the reversed logo in the navbar */
  --hp-size-nav-logo-mobile: 34px;
  --hp-size-action-min: 180px;         /* Log in / Sign up: equal, and at least this wide */
  --hp-size-wordmark: 22px;            /* the Pathcheck wordmark, wherever it is drawn, at both widths */
  --hp-space-intro: 30px 30px 22px;    /* the front door's card */
  --hp-space-intro-mobile: 22px 16px 16px;
  --hp-measure-lead: 600px;            /* ... and the widest its opening words run */
  --hp-space-home-end: 36px;           /* ... and the page ground between it and the footer */
  --hp-space-home-end-mobile: 28px;
  /* ... and its artwork (handoff drop 9), drawn at this width on desktop. Its
   * band's fill is the design system's --color-art-ground (additions.css). */
  --hp-size-art: 1440px;

  /* ---- Notes: 13px above and below the text, 15px at the sides. The design system
   * made this its --space-note (drop 16, Q22: the components win); PM1's stylesheet
   * still says 14px 16px, so this goes once finder.css is re-synced after PM1 does. */
  --space-note: 13px 15px;

  /* ---- Footer: 24px under its last line, the design system's --space-footer-end
   * since drop 16 (Q22). PM1's is still 36px, so this stays until finder.css is
   * re-synced; the phone value is set in the phone block at the end of this file. */
  --space-footer-end: 24px;
  --hp-size-crisis-glyph: 13px;        /* the phone glyph on the crisis line */

  /* A page's body, around its content. A one-column page (Account, Help, the ticket
     form, an attendance report) takes the design system's --space-page-body, 30px
     36px 40px (20px 16px 28px on a phone; handoff drop 16, Q21). Your meetings ends
     closer to its footer and has its own; the meeting pages keep the meeting card's
     --space-card-body. */
  --hp-space-meetings: 26px var(--space-gutter) var(--gap-band);
  --hp-space-meetings-mobile: var(--gap-group) var(--space-gutter-mobile) var(--gap-group);

  /* Meetings (handoff screens 03-06). */
  --hp-space-next: 22px 24px;          /* Next meeting panel: its padding */
  --hp-space-panel-mobile: 18px 16px;  /* ... and a meeting page's panel, on a phone */
  --hp-gap-next: 36px;                 /* ... the gap between its two columns */
  --hp-space-next-divider: 24px;       /* ... the start column's inset from its divider */
  --hp-size-next-start: 300px;         /* ... the start column, divider included */
  --hp-size-hint-col: 200px;           /* a meeting row's start hint */
  --hp-size-row-chevron: 15px;         /* ... and the chevron after it */
  --hp-size-program-logo: 20px;        /* a program's logo beside its name */
  --hp-size-program-logo-lead: 24px;   /* ... in a meeting page's header */
  --hp-size-code-label: 56px;          /* the CODE / LINK label column */
  --hp-size-code-label-mobile: 44px;
  --hp-space-code-row: 11px;           /* above and below a code card row's value */
  --hp-line-glyph-label: 1.3;          /* a glyph on the first line of a label that wraps */
  --hp-space-detail-mobile: 18px 16px 28px; /* a meeting page's body, on a phone */
  --hp-space-textmenu-overhang: 2px;   /* the reminders menu, on a phone: drop 28 draws it 326px, 2px wider than the card's content */
  --hp-space-detail-after: 0 var(--space-gutter) var(--space-card-body-end); /* what follows a meeting page's body */
  --hp-space-detail-bottom-mobile: 28px; /* ... and under the last thing on it, on a phone */

  /* ---- Fields (handoff; the design system's TextField, ruled for in drop 16, Q22):
   * what is typed is 400 16px on a line of its own height, 14px in from the box's
   * edge. PM1's input is still 15px/1.45 and 16px in. */
  --hp-type-input: 400 16px/1;
  --hp-type-next-when: 700 22px/1.2;   /* a meeting page's date: the same at both widths */
  --hp-space-input: 0 14px;
  --hp-space-nudge: 2px;               /* a switch column, to sit level with its text */

  /* Account (handoff screen 07). */
  --hp-size-acct-nav: 200px;           /* the jump links' column */
  --hp-gap-acct: 36px;                 /* ... and the gap to the sections */
  --hp-space-acct-link: 0 14px;        /* a jump link's inset from its rail */
  --hp-space-acct-section: 22px 24px;  /* a section card's padding */
  --hp-size-country: 116px;            /* the phone country picker, closed: a flag and the widest dial code (decision 22.12) */
  --hp-size-country-list: 342px;       /* ... and its list, which has names to fit: 340 inside its border (drop 24) */
  --hp-line-code-glyph: 19px;          /* a glyph under Verify, on its 13px line's first line */
  --hp-size-code: 240px;               /* the verification code field (drop 24, 07c; full width on a phone) */
  --hp-size-notify-switches: 160px;    /* the Email / SMS switch column */

  /* Help and the support ticket (handoff screens 08 and 09). */
  --hp-space-help-side: 30px 28px 40px;                /* "Still need help?" beside the questions */
  /* On a phone: the page body's 20px top and sides; the side block below brings its
     own 28px bottom (--space-detail-side-mobile). */
  --hp-space-help-mobile: 20px var(--space-gutter-mobile) var(--gap-block);
  --hp-space-faq-answer: 0 36px var(--gap-block) 0;    /* an answer: clear of the chevron */
  --hp-measure-ticket: 640px;          /* the ticket form's column */
  --hp-size-textarea-mobile: calc(5lh + 28px); /* five lines, its padding and its border */

  --hp-space-upcoming-chip: -7px 0;    /* the Canceled chip's own padding (--space-chip), given back in a date row */


  /* Attendance history (handoff drop 17, screen 13) */
  --hp-space-history-head: 20px var(--gap-group) var(--gap-block);  /* the card's head */
  --hp-space-history-head-mobile: 18px var(--space-gutter-mobile) var(--gap-inline);
  --hp-space-history-heads: 0 var(--gap-group) var(--gap-chip);     /* the column heads */
  --hp-space-history-row: var(--gap-chip) var(--gap-group);         /* a row */
  --hp-space-history-group: var(--gap-block) var(--gap-group) var(--gap-chip); /* a month's label row */
  --hp-space-history-chart: 0 var(--gap-group) var(--gap-barchart-value); /* round the chart */
  --hp-space-history-empty: 30px var(--gap-group) 34px;             /* "No past meetings yet" */
  --hp-space-history-empty-mobile: 26px var(--space-gutter-mobile) 30px;
  --hp-space-history-foot: 13px var(--gap-group) 18px;              /* the 12 months' footnote */
  --hp-space-history-foot-mobile: var(--gap-inline) var(--space-gutter-mobile) var(--gap-block);
  --hp-size-history-end-mobile: 7px;   /* under the last row of a card with no footnote, on a phone (9px on desktop) */
  --hp-size-history-date: 150px;       /* the date column, desktop */
  --hp-size-history-count: 84px;       /* a count column */
  --hp-size-history-count-mobile: 56px;
  --hp-size-history-row: 48px;         /* a row's least height */
  --hp-size-history-row-mobile: 56px;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

/* THE THEME (handoff drop 11; design-system drop 6, tokens/themes.css). The design
   system's navbar is light; a Pathminder-owned surface -- this portal, the Pathminder
   finder, Pathcheck -- puts .theme-pathminder on <body> (portal/base.html) and gets
   the brand navy with white links, and brand cyan for the current page and its
   rail: the one place marketing navy and cyan are UI colours. The bar's 1px bottom
   line is the navy darkened (handoff drop 13: "the drop 95 rule for every dark
   nav"), so the bar keeps an edge without a light rule under it.

   PM1's stylesheet has no .theme-pathminder yet, so it is here; its eight tokens
   are the same ones a dark tenant's navbar overrides. */
.theme-pathminder {
  --color-nav-bg: #00384D;
  --color-nav-line: color-mix(in srgb, var(--color-nav-bg) 75%, black);
  --color-nav-ink: #ffffff;
  --color-nav-muted: #ffffff;
  --color-nav-active-ink: #6EDEF9;
  --color-nav-active-line: #6EDEF9;
}

/* THE BAR (handoff drop 13): 64px, then the 1px line -- 65px in all, at both
   widths. Its links are PM1's (meeting-finder drops 93 and 95): each the bar's full
   64px, 3px of padding above the label to balance the 3px rail below it, so every
   label is on the bar's centre line with "Host portal" and the current page's rail
   ends exactly on the line. Here only the row's height is pinned, to 64px at both
   widths (PM1's phone bar is sized by its contents), and the breadcrumb's padding
   taken out, so "Host portal" sits on that same centre line. */
.pm-navbar__inner { box-sizing: border-box; height: var(--size-navbar); min-height: 0; }
.pm-breadcrumb { padding: 0; }
.pm-breadcrumb a:last-child { line-height: 1; }

/* The logo is a wide lockup, not the finder's square org mark, so it is sized by
   height. flex: none keeps the breadcrumb from squeezing it below the brand
   standards' 72px minimum width. */
.hp-brand { flex: none; }
.hp-brand__logo {
  display: block;
  height: var(--hp-size-nav-logo);
  width: auto;
}

/* The finder hides the chevron below 880px, where it also hides the org's name and
   the chevron would separate nothing. Here the logo and "Host portal" both stay, so
   the chevron between them stays too (handoff, mobile navbar). */
.pm-breadcrumb .pm-breadcrumb__sep {
  display: inline-block;
  /* Handoff: 11px and solid white, on the text's own line height as the design
     system's SiteNav sets it -- which is what places the glyph where it is drawn
     (handoff drop 13). The finder's is 12px at 70%. */
  font-size: var(--size-glyph-chevron);
  opacity: 1;
}

/* "Logged in as ..." belongs to the phone menu only. */
.hp-nav__who { display: none; }

/* Log out is a form (it is a POST), but it must sit in the bar as one more link.
   display: contents removes the form's own box so its button becomes a direct flex
   item of .pm-nav, exactly like the <a> elements beside it. */
.hp-nav__logout { display: contents; }
.hp-nav__logout button {
  font: var(--type-label) var(--font-text);
  color: var(--color-nav-muted);
  padding: var(--space-nav-link);
  border-bottom: var(--size-active-rail) solid transparent;
  white-space: nowrap;
}
@media (hover: hover) {
  .hp-nav__logout button:hover { color: var(--color-nav-ink); }
}
.hp-nav__logout button:active { color: var(--color-nav-ink); }

@media not all and (max-width: 767px) {
  /* Log out is a form's button; in the bar it is one more item, the box PM1 gives
     its links (.pm-nav a): the bar's height, the label centred in it. */
  .hp-nav__logout button {
    display: inline-flex;
    align-items: center;
    height: var(--size-navbar);
  }
  /* Each label on a line of its own height, as the design system's SiteNav sets it
     (600 15px/1); PM1's link takes the label type's 1.3 until it adopts the design
     system's ruling (drop 16, Q22). The text is centred in the bar either way; the
     line is what is measured. */
  .pm-nav a,
  .hp-nav__logout button { line-height: 1; }
  /* Signed out, "Log in" is the bar's last item; the menu's copy, its first row,
     is for phones (portal/base.html says why there are two). */
  .pm-nav .hp-nav__login--menu { display: none; }
}

@media (max-width: 767px) {
  /* The two glyph buttons: the glyph on a line of its own height, so it is centred
     in its 44px button as the mock's is (the stylesheet's inherits the page's line
     height, which sits it 1px higher). */
  .pm-navbar__help i,
  .pm-navbar__toggle i { line-height: 1; }
  .hp-brand__logo { height: var(--hp-size-nav-logo-mobile); }
  /* The phone bar's chevron is on a line of its own height, as the handoff's
     mobile navbar draws it (the desktop one keeps the text's). */
  .pm-breadcrumb .pm-breadcrumb__sep { line-height: 1; }

  /* THE PHONE MENU. The finder's menu is a 300px drawer from the right with its own
     header and close button. The host portal handoff draws something else: the
     navbar stays where it is, its Menu button turns into the close button, and the
     links drop down beneath it as a full-width panel over the scrim.

     So: no drawer header, the panel and the scrim both start under the bar, the
     panel is as tall as its rows rather than the screen, and it casts the overlay
     shadow downward instead of the drawer's sideways one. The `pmNav` component in
     components.js swaps the button's glyph. */
  .pm-nav__head { display: none; }
  .pm-nav {
    top: calc(var(--drawer-top, 0px) + var(--size-navbar));
    bottom: auto;
    width: 100%;
    max-height: calc(100dvh - var(--drawer-top, 0px) - var(--size-navbar));
    box-shadow: var(--shadow-overlay);
  }
  .pm-navscrim { inset: calc(var(--drawer-top, 0px) + var(--size-navbar)) 0 0 0; }
  /* The close glyph is a size under the menu glyph it replaces (handoff). */
  .pm-navbar__toggle[aria-expanded="true"] { font-size: var(--size-glyph-nav); }

  /* A row, to the handoff's measurements (screen 10): 52px, the label type, and a
     3px rail on its LEFT edge -- the design system's "current item in a vertical
     nav" -- that every row has, clear on all but the current one, so every label
     starts at the same place. */
  .pm-nav a {
    /* 52px of row above its hairline, as the mock measures it. */
    box-sizing: content-box;
    border-left: var(--size-active-rail) solid transparent;
    font: var(--type-label) var(--font-text);
  }
  .pm-nav a[aria-current="page"] { border-left-color: var(--color-action); }
  .pm-nav .hp-nav__login--bar { display: none; }

  /* Who is logged in, and Log out 6px under it: one block, 16px in and 18px from
     the sheet's bottom edge. The email is small and quiet; it must wrap, not widen
     the menu. */
  .hp-nav__who {
    display: block;
    padding: var(--gap-block) var(--space-gutter) 0;
    font: var(--type-caption) var(--font-text);
    color: var(--color-ink-subtle);
    overflow-wrap: anywhere;
  }
  .hp-nav__logout {
    display: flex;
    padding: var(--gap-glyph) var(--space-gutter) var(--space-row);
  }
  /* A text action in the action colour, 44px tall to tap. */
  .hp-nav__logout button {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-tap-min);
    padding: 0;
    border: 0;
    color: var(--color-action);
  }
  @media (hover: hover) {
    .hp-nav__logout button:hover { color: var(--color-action-hover); text-decoration: underline; }
  }
  .hp-nav__logout button:active { color: var(--color-action-hover); text-decoration: underline; }
}

/* ==========================================================================
   A page's body: its padding (see the note at --hp-space-meetings)
   ========================================================================== */

/* finder.css re-points --space-page-body to its phone value under 768px. */
.pm-card__body { padding: var(--space-page-body); }

/* ==========================================================================
   Page head -- the title with its quiet companion line ("Signed in as ...")
   ========================================================================== */

.hp-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-hairline) var(--gap-block);
}
.hp-pagehead__meta {
  min-width: 0;
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-muted);
  overflow-wrap: anywhere; /* a long email must wrap, not run off the card */
}
@media (max-width: 767px) {
  /* On a phone the companion line goes under the title, in the same type and ink
     as beside it on desktop (handoff drop 4). */
  .hp-pagehead { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Front door (signed-out home)
   ========================================================================== */

/* The "You're logged out." banner sits above the band, 16px under the bar and
   over it, and in the page's gutter at the sides: 36px on desktop, aligned with the
   card below it, and 16px on a phone (handoff drop 14, Q6). Once the banner is
   dismissed its frame goes too, or the band would start 32px below the navbar. */
.hp-home__notice { padding: var(--gap-block) var(--space-gutter); }
.hp-home__notice:not(:has(.pm-statusbanner)) { display: none; }

/* 36px of page ground between the card and the footer (28px on a phone). The
   three points that used to follow it are gone (handoff drop 7). */
.hp-home__intro { padding-bottom: var(--hp-space-home-end); }

/* The front door's artwork, placed as the handoff's mock places it (drop 9). On
   desktop it is drawn at its own 1440px and centred, so a band narrower than that
   cuts both sides equally. The page card keeps the band under 1000px, so the
   cream the handoff shows beyond 1440px is only ever seen while the image loads.
   It is never scaled, so its stripes keep their weight at every width. On a
   phone the phone crop fills the band (below). */
.hp-home__band {
  position: relative;
  overflow: hidden;
  background: var(--color-art-ground);
}
/* The <picture> is a block the band's height, so the phone crop's height: 100%
   (below) is measured against the band in every browser, not through the
   anonymous box an inline <picture> leaves around it. */
.hp-home__band picture { display: block; height: 100%; }
.hp-home__band .hp-home__art {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--hp-size-art);
  max-width: none; /* .pm img caps every image at its container's width */
  height: 100%;
  margin-left: calc(var(--hp-size-art) / -2);
}

/* The front-door card, to the handoff's measurements (screen 01): its three parts
   -- the opening words, the two buttons, the pointer for participants -- 22px
   apart, in more room than the finder's intro card has. */
.pm-intro__card { gap: var(--gap-group); padding: var(--hp-space-intro); }
/* The opening words, no wider than 600px, follow the page-head rule: kicker -> 6px
   -> title (handoff drop 16, Q23) -> 9px -> sentence (drop 23, Q32). The title
   breaks where the words run out, as the mock's does (the stylesheet's balances it). */
.hp-home__lead {
  display: flex;
  flex-direction: column;
  gap: var(--gap-chip);
  max-width: var(--hp-measure-lead);
}
.hp-home__heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.hp-home__lead .pm-intro__title { text-wrap: wrap; }

/* Log in and Sign up: two equal columns, each at least 180px and as wide as the
   longer label needs, 16px apart (the designer's ruling in handoff drop 3). */
.hp-home__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--hp-size-action-min), max-content));
  gap: var(--gap-block);
}

/* The pointer for participants (<c-hp.participants>), fenced off from the host's
   own content by a hairline -- it is for someone who is in the wrong place. The
   wordmark and the sentence sit on one line, centred, 16px apart. Drawn on this
   card and, the same, in the empty "Your meetings" of an account with no host role
   (placed there under "Empty" below). */
.hp-participants {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-chip) var(--gap-block);
  padding-top: var(--gap-block);
  border-top: 1px solid var(--color-line-row);
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
}
.hp-participants p { flex: 1; min-width: 0; }
.hp-participants strong { font-weight: 600; color: var(--color-ink-strong); }
.hp-participants a { font-weight: 600; }
.hp-participants__wordmark {
  flex: none;
  height: var(--hp-size-wordmark);
  width: auto;
}

@media (max-width: 767px) {
  .hp-home__intro { padding-bottom: var(--hp-space-home-end-mobile); }
  /* Below the stylesheet's breakpoint the image fills the 180px band, cut to it
     and centred: the phone crop up to 390px, and from 391px the desktop file, which
     is wide enough to be cut at its sides only (handoff drop 14, Q3). */
  .hp-home__band .hp-home__art {
    position: static;
    width: 100%;
    margin-left: 0;
    object-fit: cover;
  }
  /* The card: 16px between its parts. Its sentence is the same 16px as on desktop
     (handoff drop 4). */
  .pm-intro__card { gap: var(--gap-block); padding: var(--hp-space-intro-mobile); }

  /* Full-width buttons, stacked 12px apart. */
  .hp-home__actions { grid-template-columns: minmax(0, 1fr); gap: var(--gap-inline); }

  /* The wordmark over the sentence. */
  .hp-participants { flex-direction: column; align-items: flex-start; gap: var(--gap-chip); }
}

/* ==========================================================================
   Gate pages -- account suspended, sign-in problem, not found, server error.
   One heading, one short paragraph, the way forward as buttons.
   ========================================================================== */

.hp-gate {
  /* Prose is capped at the design system's explainer measure so a line never runs
     the full width of the card. */
  max-width: calc(var(--measure-explainer) + var(--space-gutter) * 2);
}
.hp-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-block);
  padding-top: var(--gap-chip);
}

@media (max-width: 767px) {
  .hp-gate__actions { flex-direction: column; }
  .hp-gate__actions .pm-button { width: 100%; }
}

/* ==========================================================================
   Your meetings (handoff screen 03)
   ========================================================================== */

/* Heading, then everything that refreshes: 22px apart, in the page's own padding. */
.hp-meetings { gap: var(--gap-group); padding: var(--hp-space-meetings); }

/* The live region: the Next meeting panel and the lists under it. */
.hp-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--gap-band);
}

/* A heading and its list. */
.hp-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* The well a list of rows sits in: the hover fill, so the white cards in it read as
   separate things and the gap between two cards is the boundary between two
   meetings (PM1's .pm-results does the same for the finder, full-bleed). */
.hp-well {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--gap-inline);
  background: var(--color-surface-hover);
  border-radius: var(--radius-card);
}

/* ---- Next meeting panel ---------------------------------------------------
   The tint, border and radius are .pm-action-block's. That block is a column by
   default; here it is two columns -- what the meeting is, and what to do about it
   -- split by a hairline in the selected-edge colour. */
.hp-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hp-size-next-start);
  gap: var(--hp-gap-next);
  padding: var(--hp-space-next);
}
/* Every part of the column is 12px from the next (handoff screen 03)... */
.hp-next__what {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-inline);
  min-width: 0;
}
/* The mode label is one line of its text's height (21px), with its glyph's line the
   same height and both starting at the top, as the handoff draws it. The
   stylesheet's glyph takes the text's line-height FACTOR at its own larger size,
   which makes the label 1.5px taller and pushes everything under it down on a
   phone. (1lh in a line-height is the parent's line height.) */
.hp-next .pm-mode,
.pm-detail__header .pm-mode { align-items: flex-start; }
.hp-next .pm-mode i,
.pm-detail__header .pm-mode i { line-height: 1lh; }
/* ...except the name and its program line, which are one block, 6px apart. */
.hp-next__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-glyph);
  min-width: 0;
}
.hp-next__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-hairline) var(--gap-inline);
}
.hp-next__time {
  font: var(--type-time) var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-strong);
}
.hp-next__day { font: var(--type-subhead) var(--font-text); color: var(--color-ink-strong); }
.hp-next__duration { font: var(--type-caption) var(--font-text); color: var(--color-ink-subtle); }
/* The link colours and the hover and pressed states are the stylesheet's own, for
   this and every other link below. */
.hp-next__title { font: var(--type-card-title) var(--font-text); }
/* "Meeting details >" under the mode label (handoff drop 5): a text action whose
   area to press is 44px tall at BOTH widths, with its label on a line of its own
   height in the middle of it. */
.hp-next .hp-next__details { min-height: var(--size-tap-min); line-height: 1; }
.hp-next__start {
  border-left: 1px solid var(--color-line-selected);
  padding-left: var(--hp-space-next-divider);
}

/* A panel with nothing to start is a white card in the action surface's place
   (design system, Surfaces; handoff drop 15): the card's own edge, the hairline
   colour for any line inside it, and the subtle ink a helper takes on white. So is
   a panel whose Start is still to come while the page leads with a report owed
   (hp-panel--quiet; handoff drop 20): one tint on the page. */
.pm-action-block.hp-panel--done,
.pm-action-block.hp-panel--quiet,
.pm-action-block.hp-next--done {
  background: var(--color-surface-card);
  border-color: var(--color-line-card);
}
.hp-next--done .hp-next__start,
.hp-panel--quiet .hp-status__facts { border-color: var(--color-line-row); }
.hp-panel--done .hp-status__help,
.hp-panel--quiet .hp-status__help,
.hp-next--done .hp-status__help { color: var(--color-ink-subtle); }

/* "Attendance to report" (handoff drop 20, 05h): the action surface a meeting's page
   leads with while a report is owed and Start is not there. Eyebrow, the date and
   time (22px at both sizes, as the panel's), one sentence, 6px apart; the primary
   button and its note 16px under them (12px on a phone). */
.hp-owed__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.hp-owed__when {
  font: var(--hp-type-next-when) var(--font-text);
  color: var(--color-ink-strong);
}
.hp-owed__ask {
  margin: 0;
  font: var(--type-value) var(--font-text);
  color: var(--color-ink-body);
}

/* ---- Program line: logo, program, hosts ------------------------------------ */
/* As the handoff builds it: the logo, the program, the dot and the hosts are four
   items on one wrapping row, 6px apart and centred on it. When they do not all fit,
   whole items move to the next line, 3px down. On a phone the hosts always have a
   line of their own (below). (The two wrappers exist for the markup's sake -- what
   a screen reader is given -- and dissolve here.) */
.hp-program {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-hairline) var(--gap-glyph);
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
}
.hp-program__logo {
  flex: none;
  width: var(--hp-size-program-logo);
  height: var(--hp-size-program-logo);
  object-fit: contain;
}
.hp-program__text,
.hp-program__hosts { display: contents; }
.hp-program__hosts { color: var(--color-ink-subtle); }
@media (max-width: 767px) {
  /* On a phone the hosts always start a line of their own, with no dot before
     them (handoff drop 14, Q2): the same rule as the meeting page's title line,
     so a dot is never left at the end of a line. */
  .hp-program__hosts { display: block; flex-basis: 100%; }
  .hp-program__dot { display: none; }
}

/* In a meeting page's header the line takes the header's own type, the logo is a
   size larger (handoff: 24px on the detail page), and there are no hosts: the logo
   and the program's name stay side by side, and a long name wraps beside the logo. */
.hp-program--lead { font: inherit; flex-wrap: nowrap; }
.hp-program--lead .hp-program__text { display: block; min-width: 0; text-wrap: pretty; }
.hp-program--lead .hp-program__logo {
  width: var(--hp-size-program-logo-lead);
  height: var(--hp-size-program-logo-lead);
}

/* ---- Start panel -----------------------------------------------------------
   Every value here is the handoff's (drop 2), and was checked by measuring the mock
   and the build with the same code. Its parts are 12px apart: status, help, button,
   facts. With the facts' own 12px above their first row, the rule sits evenly
   between the button and "Scheduled end". */
.hp-status {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* The status line (cotton/hp/start_status.html): a glyph, the status, a detail.

   Stacked (Your meetings): a two-column grid. The glyph and the status share the
   first row, 6px apart; the detail takes a row of its own from the LEFT edge, 3px
   under. The words' wrapper dissolves so that status and detail are grid items. */
.hp-status__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* The glyph is a little taller than the text beside it; they share a centre, as
     in the mock (align-items: center). A status long enough to wrap therefore has
     its glyph centred on its two lines, which is also what the mock would draw. */
  align-items: center;
  gap: var(--gap-hairline) var(--gap-glyph);
  font: var(--type-label) var(--font-text);
  color: var(--color-ink-strong);
}
.hp-status__words { display: contents; }
.hp-status__detail { grid-column: 1 / -1; }
/* The dot between status and detail belongs to the one-line drawing only. */
.hp-status__sep { display: none; }
/* The glyph's line is as tall as a line of the text beside it (it takes the text's
   line-height, at its own size), so the two sit on one line. The stylesheet's
   .pm-glyph sets line-height 1, which is for glyphs centred in a row. */
.hp-status__main .pm-glyph { line-height: inherit; }

.hp-status__detail,
.hp-status__help {
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
.hp-status__help a { font-weight: 600; }

/* The same glyph-and-label line where it stands alone, outside the start panel: the
   Attendance card's "Collected automatically", an attendance report's result. The
   handoff's values: the glyph and the words 6px apart and starting at the top, in
   the label type. */
.hp-status__line {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-glyph);
  font: var(--type-label) var(--font-text);
  color: var(--color-ink-strong);
}
.hp-status__line .pm-glyph { line-height: inherit; }

/* Inline (a meeting's own page, handoff screens 05 and 06, as redrawn in drop 4):
   a 16px glyph, then ONE run of ordinary body text -- "Ready to start · Opened at
   6:45 PM" -- at both widths. The status, the dot and the detail are words in a
   sentence (the dot has a word space on each side and the separator's light ink),
   so a long one wraps like text, beside the glyph. The glyph's line is as tall as a
   line of that text, and both start at the top. */
.hp-status__main--inline {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-glyph);
  font: var(--type-value) var(--font-text);
  color: var(--color-ink-body);
}
.hp-status__main--inline .hp-status__words { display: inline; min-width: 0; }
.hp-status__main--inline .hp-status__detail { font: inherit; color: inherit; }
.hp-status__main--inline .hp-status__sep { display: inline; color: var(--color-ink-separator); }
.hp-status__main--inline .pm-glyph { font-size: var(--size-glyph); line-height: 1lh; }

/* On a meeting's page the rest of the start panel (help, button, facts) joins the
   panel's own column, whose spacing is the design system's (.pm-action-block). */
.hp-status--inline { display: contents; }

/* The facts under the button (handoff drop 2): a hairline, then labels in muted ink
   and values in a second column that all start at the same edge. The times are
   tabular so they line up under one another. */
.hp-status__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--gap-glyph) var(--gap-inline);
  margin: 0;
  padding-top: var(--gap-inline);
  border-top: 1px solid var(--color-line-selected);
  font: var(--type-helper) var(--font-text);
}
/* The Pathcheck code at the foot of the panel on Your meetings (handoff drop 5):
   the same hairline as the facts, 12px, the wordmark, 9px, then one row -- CODE,
   the code, Copy -- 12px between its columns. */
.hp-status__code {
  display: flex;
  flex-direction: column;
  gap: var(--gap-chip);
  padding-top: var(--gap-inline);
  border-top: 1px solid var(--color-line-selected);
}
.hp-status__wordmark { align-self: flex-start; height: var(--hp-size-wordmark); width: auto; }
.hp-status__coderow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--gap-inline);
}
.hp-status__facts dt { color: var(--color-ink-muted); }
.hp-status__facts dd { margin: 0; color: var(--color-ink-body); text-wrap: pretty; }
.hp-status__facts b { font-weight: 600; color: var(--color-ink-strong); }

/* ---- The primary button has no border (handoff; the design system's Button, ruled
   for in drop 16, Q22). PM1's stylesheet still has a 1px one in the fill's own
   colour, which makes the button 2px wider than drawn. */
.pm-button--submit { border: 0; }
/* While it waits ("Sending..."), the stylesheet's disabled look keeps its edge -- drawn
   inside the button, so the button does not change size as it is disabled. */
.pm-button--submit[disabled] { box-shadow: inset 0 0 0 1px var(--color-line-control); }
/* Where the system draws its own colours (Windows high contrast) fills are not
   painted, and a button with no border would have no shape. */
@media (forced-colors: active) {
  .pm-button--submit { border: 1px solid ButtonText; }
}

/* ---- A disabled secondary button ---------------------------------------------
   Design Standards: "Disabled: #a3a8ac text, no fill change". The stylesheet's
   .pm-button[disabled] greys the fill as well, so the fill is put back here. Used
   where a button waits for something to act on (Account: Save, Verify number). */
.pm-button--secondary[disabled] { background: var(--color-surface-card); }

/* ---- Start: the button, and a note under it ------------------------------------
   .hp-start wraps the Start control and the one sentence that can follow it ("Start
   was clicked in this browser at ...", or why a screen name is needed). The two
   layouts arrange the same markup differently (handoff screens 03 and 05):

     stacked (the Next meeting panel's narrow column)
         a full-width button, then the note. The wrapper dissolves
         (display: contents) so its children join the panel's own column.

     inline (a meeting's page)
         the button at its own width, the note on the row under it.

   The button's colours, height and pressed state are the stylesheet's
   (.pm-button, and .pm-action-block .pm-button for the tinted panel it sits in). */
.hp-start { display: contents; }
.hp-start__form { display: flex; }
.hp-start .pm-button { width: 100%; }

/* Desktop only: on a phone a meeting's page uses the stacked arrangement too
   (handoff screen 05, mobile), where every button is full width. */
@media not all and (max-width: 767px) {
  .hp-status--inline .hp-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-inline);
  }
  .hp-status--inline .hp-start .pm-button { width: auto; }
}

/* A page that offers one way forward as a form (the "Try again" on a failed start):
   the form contributes no box, so its button lines up with the links beside it. */
.hp-gate__form { display: contents; }

/* A text action beside an error card's button ("Use a different account", "Contact
   support"): the design system's TextAction, its label on a line of its own height,
   and centred where a phone stacks the card's actions full width. */
.pm-errorcard__actions .hp-textaction { justify-content: center; line-height: 1; }
/* The page around the error card: the page ground (#edeeef), 48px above and below
   on desktop and 30px on a phone -- the design system's .pm-errorpage since drop 16
   (Q29). PM1's stylesheet still gives it the lighter #f5f7f8 and 48px below on a
   phone, so this stays until finder.css is re-synced after PM1 changes. */
.pm-errorpage { background: var(--color-surface-page); }
@media (max-width: 767px) {
  .pm-errorpage { padding-bottom: var(--gap-band); }
}

/* ---- Meeting row -----------------------------------------------------------
   PM1's list row (.pm-listrow) with the finder's rail and verifications columns
   taken out and a start hint put in. Every value is the handoff's (screen 03),
   measured:

       time 104px | mode 84px | title and program | hint 200px
       22px between columns, 18px inside the card's left edge and 22px inside its
       right, 18px above and below each column's content.

   The finder's row keeps an empty first grid row for the "Canceled" chip and puts
   the title in the second. Its title block is taller than its time block, so that
   costs it nothing. Here the title block is the shorter one, and the spare height
   went into that empty row -- pushing the title 18px down the card. So the title
   block spans both rows, except in a canceled row, where the chip has the first. */
.hp-row {
  grid-template-columns:
    var(--size-time-col) var(--size-mode-col) minmax(0, 1fr) var(--hp-size-hint-col);
  padding: 0 var(--gap-group) 0 var(--space-row);
}
.hp-row .pm-listrow__time { grid-column: 1; padding: var(--space-card-row); }
.hp-row .pm-modeblock { grid-column: 2; align-self: center; }
.hp-row .pm-listrow__content { grid-column: 3; grid-row: 1 / span 2; }
.hp-row .pm-canceled-chip { grid-column: 3; }
.hp-row.pm-listrow--canceled .pm-listrow__content { grid-row: 2; }

@media not all and (max-width: 767px) {
  /* The mode, stacked: the glyph centred in a 24px slot, 3px, the word (handoff).
     The finder's has no gap and gets the slot from the glyph's line height, which
     sits the glyph a fraction lower. align-content centres the glyph's line in the
     slot; a browser without it leaves the glyph 1px higher. */
  .hp-row .pm-modeblock .pm-mode { gap: var(--gap-hairline); }
  .hp-row .pm-modeblock .pm-mode i {
    height: var(--size-glyph-mode-box);
    line-height: 1;
    align-content: center;
  }
}

.hp-row__hint {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-chip);
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-muted);
  text-align: right;
}
.hp-row__chevron { font-size: var(--hp-size-row-chevron); color: var(--color-ink-body); }

/* ---- Empty: a host with no meetings (handoff drop 14, Q15) ------------------
   PM1's empty state (.pm-empty: centred, 60px around it, 9px apart) with the
   design system's EmptyState inside it: the glyph in the disabled ink, a row
   title's type, the sentence in the meta type and never wider than an
   explainer, and a text action 6px further down. */
.hp-empty > i { color: var(--color-ink-disabled); }
.hp-empty__title { font: var(--type-row-title) var(--font-text); color: var(--color-ink-strong); }
.hp-empty__text {
  max-width: var(--measure-explainer);
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
  text-wrap: pretty;
}
.hp-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-chip);
  padding-top: var(--gap-glyph);
}
.hp-empty__actions .hp-textaction { line-height: 1; }

/* An account with no host role also gets the front door's pointer for
   participants, under "Get help" (no mock; decided 2026-11-01, see
   host-portal-decisions.md). It is drawn exactly as on the front door: as wide as
   the empty state rather than shrunk to its words and centred like the lines above
   it, its text set left, and its hairline as far below "Get help" as the front
   door's is below Log in and Sign up -- 22px, or 16px on a phone (that card's gap
   between its parts). The empty state's own 9px gap is part of that distance. */
.hp-empty .hp-participants {
  align-self: stretch;
  margin-top: calc(var(--gap-group) - var(--gap-chip));
  text-align: start;
}
@media (max-width: 767px) {
  .hp-empty .hp-participants { margin-top: calc(var(--gap-block) - var(--gap-chip)); }
}

/* ==========================================================================
   An attendance report (handoff screen 11; the page a reminder's link opens)
   ========================================================================== */

/* A form page: one column, left-aligned in the card, its content no wider than
   640px (the support ticket's column), as the handoff draws it. Its parts -- head,
   banner, panel -- 22px apart. */
.hp-report {
  max-width: calc(var(--hp-measure-ticket) + var(--space-gutter) * 2);
  gap: var(--gap-group);
}

/* THE PAGE HEAD (design-system drop 5, Page head) of a page with a kicker: the
   back link, then 16px; the kicker and the title tied 6px apart; the line under
   the title 9px below it. The report page and a meeting's attendance history. */
.hp-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-block);
}
.hp-head__titles {
  display: flex;
  flex-direction: column;
  gap: var(--gap-chip);
}
.hp-head__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-glyph);
}
.hp-head__sub,
.hp-report__when { font: var(--type-body) var(--font-text); color: var(--color-ink-body); }

/* The status slot has no box of its own: an empty one takes no room, and a banner
   in it is spaced like any other part of the page (as Account's, .hp-acct__status). */
.hp-report__status { display: contents; }

/* "Stop reminders for this meeting" (portal/reminders_stop.html; handoff screen
   15, drop 31): the report page's column, head and panel -- tinted while there is
   something to stop, a white card once there is not. A form is exactly as tall as
   its button (a block form would add a text line's leading around it); the Account
   link is as wide as its words. The line under the title is the meeting page's
   (below, .hp-detail .pm-detail__sub). */
.hp-stop form { display: flex; }
/* The design system's TextAction: 600 14px on a line of its own height (the
   selector outweighs .hp-textaction's font shorthand, later in this file). */
.hp-stop .hp-stop__account { align-self: flex-start; line-height: 1; }
/* Screen 15 sets its sentences `text-wrap: pretty` itself, as the note box and the
   front door do (see .pm-prose under "Small controls"). */
.hp-stop .pm-prose { text-wrap: pretty; }

/* THE PANEL (design system, Surfaces): the selected tint while the count can be
   entered or changed -- the page's one task -- and a white card in the same place
   once it is final or closed. The two share their size, so nothing moves. */
.hp-report__panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  padding: var(--space-action-block);
  border: 1px solid var(--color-line-card);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}
.hp-report__panel--task {
  background: var(--color-surface-selected);
  border-color: var(--color-line-selected);
}
/* The form adds no box: its field and its row are the panel's own parts. */
.hp-report__form { display: contents; }

/* The count as reported: who reported it, then the number and "people attended" on
   one baseline, the number in the start time's type (the loudest number the design
   system has on desktop); then, once it is final, a line saying so. 6px apart. */
.hp-report__count,
.hp-report__closed {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.hp-report__by { font: var(--type-field-label) var(--font-text); color: var(--color-ink-muted); }
.hp-report__figure {
  display: flex;
  align-items: baseline;
  gap: var(--gap-glyph);
}
.hp-report__number {
  font: var(--type-time) var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-strong);
}
.hp-report__people { font: var(--type-value) var(--font-text); color: var(--color-ink-body); }
.hp-report__final,
.hp-report__closedtext { font: var(--type-meta) var(--font-text); color: var(--color-ink-body); }
/* Closed: a 16px calendar glyph beside the label, 6px apart. */
.hp-report__closedtitle {
  display: flex;
  align-items: center;
  gap: var(--gap-glyph);
  font: var(--type-label) var(--font-text);
  color: var(--color-ink-strong);
}
/* The glyph on the label's own line height (1.3 at its 16px), as drawn. */
.hp-report__closedtitle i { flex: none; font-size: var(--size-glyph); line-height: var(--hp-line-glyph-label); color: var(--color-ink-glyph); }
/* Cancel is the design system's text action: its label on a line of its own height
   (as the ticket form's; the selector outweighs .hp-textaction's font shorthand). */
.hp-report__panel .hp-report__cancel { line-height: 1; }

/* ==========================================================================
   A meeting's page (handoff screens 05 and 06)
   ========================================================================== */

/* PM1's detail grid is rail | body | side. The portal has no scope rail, so: body
   | side. The side column keeps the finder's width and its hairline. */
.hp-detail { grid-template-columns: minmax(0, 1fr) var(--size-detail-side); }

/* THE "MANAGED BY" NOTE COMES AFTER THE SIDE COLUMN IN THE MARKUP, so that on a
   phone -- one column, in document order -- the upcoming dates sit above it, as the
   handoff draws them (drop 3). On desktop the grid puts it back: under the body in
   the first column, with the side column running the height of both.

   The body's bottom padding becomes the 22px between the facts and the note; the
   note's wrapper carries the page's bottom padding instead. */
.hp-detail__body--more { padding-bottom: var(--gap-group); }
.hp-detail__after { grid-column: 1; padding: var(--hp-space-detail-after); min-width: 0; }
@media not all and (max-width: 767px) {
  .hp-detail .pm-detail__side { grid-row: span 2; }
}


/* THE HEADER (handoff screens 05, 06; the design system's page head, drop 16 Q23):
   the back link, then 16px to the head at both widths; in the head the mode label
   tied 6px above the title, and the program line 12px under the title (9px on a
   phone, below). A back link's label is set on a line of its own height, as the
   mock's (here and on the ticket form). */
.pm-action-link--back { line-height: 1; }
/* A grid, so the page actions can share the back link's row on desktop and follow
   the heading on a phone with one markup. Desktop: back link | actions, centred on
   the row (the 38px buttons make it 38px, the head 24px taller), then the heading
   across both columns, 16px below. */
.pm-detail__header.hp-detail__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-block);
}
.hp-detail__head > .pm-action-link--back { grid-area: 1 / 1; }
.hp-detail__heading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-width: 0;
}
/* THE PAGE ACTIONS (handoff drop 26; design-system drop 15, Page actions): quiet
   buttons 9px apart, right-aligned on the back link's row. */
.hp-detail__actions {
  grid-area: 1 / 2;
  display: flex;
  gap: var(--gap-chip);
}
.hp-detail__titles {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}

/* The line under the title: logo, program, dot, number -- every one of them an
   item of ONE row, centred on one axis and 6px from the next (handoff).

   Centred, not on the text baseline, which is what the stylesheet's line uses: the
   logo has no text baseline, so a baseline-aligned row hung the program's name
   from the logo's bottom edge, a few pixels above the words beside it.

   The program line and each dot-and-item pair are wrappers in the markup; here
   they dissolve (display: contents) so their contents are the row's own items. */
.hp-detail .pm-detail__sub,
.hp-stop .pm-detail__sub {
  align-items: center;
  gap: var(--gap-hairline) var(--gap-glyph);
}
.hp-detail .hp-program--lead,
.hp-stop .hp-program--lead,
.hp-detail__part { display: contents; }
/* A long program name wraps beside its logo, not whole onto the next line. */
.hp-detail .hp-program__text,
.hp-stop .hp-program__text {
  max-width: calc(100% - var(--hp-size-program-logo-lead) - var(--gap-glyph));
}

/* ---- Pathcheck code card ---------------------------------------------------
   A plain card, not the tinted action block: it is reference the host shares, not
   the thing to do next. Rows are label | value | Copy. */
.hp-codecard,
.hp-attendance {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-action-block);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line-card);
  border-radius: var(--radius-card);
}
/* The code card's parts are 16px apart; the Attendance card's, 12px (handoff). */
.hp-codecard { gap: var(--gap-block); }
.hp-codecard__wordmark {
  align-self: flex-start;
  height: var(--hp-size-wordmark);
  width: auto;
}
/* ONE grid for both rows -- label | value | Copy, 16px between columns -- with a
   hairline across all three between them. A value has 11px above and below it,
   which is what gives a row its height. */
.hp-codecard__rows {
  display: grid;
  grid-template-columns: var(--hp-size-code-label) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--gap-block);
}
.hp-codecard__value,
.hp-codecard__link { padding: var(--hp-space-code-row) 0; }
.hp-codecard__rule {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-line-row);
}
.hp-codecard__link { font: var(--type-value) var(--font-text); font-weight: 600; }
.hp-codecard__note {
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
}

/* ---- Attendance card ---------------------------------------------------------
   The same plain card as the Pathcheck code (it shares that rule above): reference
   and a setting, not the thing to do next. Its notes and switch space themselves
   with the card's own gap.

   Its heading and sentence are one group, 6px apart, and 16px (12px on a phone)
   separate that group from each part after it, in every state: nothing waiting, a
   report waiting, a hybrid meeting (handoff screens 06 and 12; drop 16, Q28). */
.hp-attendance--manual { gap: var(--gap-block); }
.hp-attendance__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
/* The reminders menu sits at the right of the title, centred on it, 12px clear, in
   every state (handoff drop 21, 05h; drop 23, Q49; a menu since drop 28). While the page leads with a
   report owed, the sentence links to it, in the weight of a link in running text
   here (600). */
.hp-attendance__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
}
.hp-attendance__report { font-weight: 600; }
/* THE LAST 12 MEETINGS (handoff drop 19, 13i): the foot of every Attendance card,
   under a hairline that stands 16px below what comes before it -- the manual card's
   own gap, and the automatic card's 12px plus 4 -- with 16px under the hairline.
   Its title and summary 3px apart, the compact chart, then "See full history",
   each 12px below the last. */
.hp-attendance__recent {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding-top: var(--gap-block);
  border-top: 1px solid var(--color-line-row);
}
.hp-attendance:not(.hp-attendance--manual) .hp-attendance__recent {
  margin-top: calc(var(--gap-block) - var(--gap-inline));
}
.hp-attendance__recent-titles {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
  min-width: 0;
}
.hp-attendance__recent-title {
  font: var(--type-label) var(--font-text);
  color: var(--color-ink-strong);
}
.hp-attendance__recent-summary {
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
}
/* "See full history": a row the card's full width, under a hairline 16px below the
   chart's last line (12px and 4) with 16px under it; its title in the action blue
   over a helper, and a chevron at the right, centred on both (handoff drop 19).
   The hairline and the space under it are the wrapper's, so the hairline ends
   square; the link's own 7px corners stay for its focus ring (drop 25, Q60). */
.hp-attendance__more-rule {
  margin-top: var(--gap-barchart-lines);
  padding-top: var(--gap-block);
  border-top: 1px solid var(--color-line-row);
}
.hp-attendance__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block);
  color: var(--color-action);
  text-decoration: none;
}
.hp-attendance__more-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
  min-width: 0;
}
.hp-attendance__more-title {
  font: var(--type-label) var(--font-text);
  color: var(--color-action);
}
.hp-attendance__more-helper {
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-subtle);
}
.hp-attendance__more .bi {
  flex: none;
  font-size: var(--size-glyph);
  line-height: 1;
}
/* Only the title underlines on hover and press (decision 22.13). PM1's `a:hover`
   outranks the row's own `text-decoration: none`, and a link's underline is drawn
   under every line inside it, the helper too; hence the :hover and :active here. */
@media (hover: hover) {
  .hp-attendance__more:hover { text-decoration: none; }
  .hp-attendance__more:hover .hp-attendance__more-title {
    color: var(--color-action-hover);
    text-decoration: underline;
  }
}
.hp-attendance__more:active { text-decoration: none; }
.hp-attendance__more:active .hp-attendance__more-title {
  color: var(--color-action-hover);
  text-decoration: underline;
}

/* The reminders menu's form is exactly as tall as its trigger (a block form would
   add a text line's leading around it). The gap is for the button it has when there
   is no script to open the menu. */
.hp-attendance form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--gap-block);
}

/* A link in the facts table is 600 (handoff), and so is "Edit in Pathcheck" at the
   end of a host-registered meeting's note (handoff screen 12). */
.hp-detail .pm-fact__value a,
.hp-note__link { font-weight: 600; }

/* A run that must stay on one line (a code), and a run that may break anywhere (a
   long address in a narrow column). */
.hp-nowrap { white-space: nowrap; }
.hp-breakable { overflow-wrap: anywhere; }

/* ---- Upcoming dates (side column) ------------------------------------------- */
.hp-upcoming {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.hp-upcoming__list { display: flex; flex-direction: column; }
.hp-upcoming__row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  padding: var(--space-fact-row) 0;
  border-top: 1px solid var(--color-line-row);
}
.hp-upcoming__day { font: var(--type-label) var(--font-text); color: var(--color-ink-strong); }
/* tabular-nums here, not from a class on the element: the `font` shorthand resets
   it, and this rule comes after the stylesheet's .pm-tabular. */
.hp-upcoming__time {
  flex: 1;
  font: var(--type-value) var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-body);
  text-align: right;
}
/* Canceled is said in words as well as struck through: decoration alone must not
   carry the meaning. */
/* A canceled date: the day in the muted ink, the Canceled chip at the right in the
   time's place (handoff drop 17, 05h), its label on the time's line. The chip is
   taller than a time, so it overhangs the row's padding by its own padding -- every
   row stays 05's height (05h draws its rows 9px apart to fit it: Q43). */
.hp-upcoming__row--canceled .hp-upcoming__day { color: var(--color-ink-muted); }
.hp-upcoming__time .pm-canceled-chip { margin: var(--hp-space-upcoming-chip); }

/* ==========================================================================
   Small controls the portal adds to the design system's set
   ========================================================================== */

/* ---- Prose breaks where the words run out, as every paragraph in the handoff's
   mocks does. The stylesheet's .pm-prose evens its lines up (text-wrap: pretty),
   which breaks some of them a word earlier than drawn. The note box and the front
   door's opening sentence keep `pretty`: the mocks set it on those themselves. */
.pm-prose { text-wrap: wrap; }

/* ---- Fields, to the handoff's measurements (see the tokens). The select's closed
   box matches: 12px between its value and its chevron, the value on a body line,
   and a chevron at full strength. */
.pm-input { font: var(--hp-type-input) var(--font-text); padding: var(--hp-space-input); }
.pm-selectfield__trigger {
  gap: var(--gap-inline);
  padding: var(--hp-space-input);
  font: var(--type-body) var(--font-text);
}
.pm-selectfield__trigger i { opacity: 1; }
@media (max-width: 767px) {
  /* 50px on a phone (the design system's --size-input-m), where a button stays 52px. */
  .pm-input,
  .pm-selectfield__trigger { height: var(--size-input-m); }
}

/* ---- Text action: a button that reads as a link (Remove number, Change password).
   For something that CHANGES state, so it must be a <button> in a form, drawn with
   no button shape (handoff: "Text actions ... #1a5c8a 600, no button shape"). */
.hp-textaction {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-glyph);
  font: var(--type-field-label) var(--font-text);
  color: var(--color-action);
  text-align: left;
}
.hp-textaction i { font-size: var(--size-glyph-chevron); }
@media (hover: hover) {
  .hp-textaction:hover { color: var(--color-action-hover); text-decoration: underline; }
}
.hp-textaction:active { color: var(--color-action-hover); text-decoration: underline; }

/* ---- Switch: the off and disabled positions.
   The vendored .pm-switch only draws a switch that is ON (the finder has one, and it
   never turns off): action fill, knob to the right. <c-pm.switch> puts a real
   checkbox in front of it, and these rules move the knob and grey the track when
   that checkbox is not checked.

   Disabled (handoff): the label and the track both take the disabled ink, and
   nothing else changes -- the fill is not recoloured a second way. */
.hp-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-chip);
  cursor: pointer;
}
/* ---- A 44px-tall area to tap, laid OVER a control that is drawn shorter.
   The handoff lays these controls out at the height of their text or track (a 26px
   switch, a 14px text link) and asks for 44px to tap. Making the control itself
   44px would move everything under it; this puts the area over it instead. The
   control must be position: relative. None of them has another control within 15px
   above or below, so no area covers a neighbour.

   The switch has it at every width; the text links only on a phone (below). */
.hp-switch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--size-tap-min);
  transform: translateY(-50%);
}
/* Hidden the way the stylesheet hides a checkbox's own input: still focusable,
   still read out, just not drawn. */
.hp-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Handoff: 600 14px in body ink. */
.hp-switch__label { font: var(--type-field-label) var(--font-text); color: var(--color-ink-body); }
.hp-switch input:not(:checked) ~ .pm-switch { background: var(--color-ink-disabled); }
.hp-switch input:not(:checked) ~ .pm-switch .pm-switch__knob { margin-left: 0; }
.hp-switch input:focus-visible ~ .pm-switch {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.hp-switch--disabled { cursor: default; }
.hp-switch--disabled .hp-switch__label { color: var(--color-ink-disabled); }

/* ---- Saved: the quiet confirmation beside a control (<c-hp.saved>). */
.hp-saved {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-glyph);
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
  text-wrap: pretty;
}
.hp-saved i { color: var(--color-ink-glyph); }

/* ==========================================================================
   Account (handoff screen 07)
   ========================================================================== */

.hp-acct { gap: var(--gap-group); }

/* Where "Profile saved." goes: under the page title, 22px from it and from what
   follows (handoff drop 7). The slot is always in the page -- it is the status
   region a save's reply puts the banner into (portal/account/_status.html). It has
   no box of its own, so the banner is spaced like any other part of the page and
   an empty slot takes no room. */
.hp-acct__status { display: contents; }

/* Jump links | sections, 36px apart. The links stay put while the sections scroll. */
.hp-acct__layout {
  display: grid;
  grid-template-columns: var(--hp-size-acct-nav) minmax(0, 1fr);
  gap: var(--hp-gap-acct);
  align-items: start;
}
.hp-acct__nav {
  position: sticky;
  top: var(--gap-block);
  gap: 0;
}
/* The design system's contents list, to the handoff's measurements: 44px rows that
   touch (one continuous rail), the label 14px in from the rail, the label type,
   and a hairline rail on the rows that are NOT current (the vendored list leaves
   those transparent and 3px apart). The current row's rail and colour are the
   stylesheet's own (a[aria-current="true"]). */
.hp-acct__nav a {
  min-height: var(--size-tap-min);
  padding: var(--hp-space-acct-link);
  border-left-color: var(--color-line-row);
  font: var(--type-label) var(--font-text);
}
.hp-acct__nav a[aria-current="true"] { border-left-color: var(--color-action); }
@media (hover: hover) {
  .hp-acct__nav a:hover { background: var(--color-surface-hover); text-decoration: none; }
}

.hp-acct__sections {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  min-width: 0;
}
/* A section is a bordered card on desktop. scroll-margin keeps its heading clear of
   the top edge when a jump link (or "Change" on a meeting) lands on it. */
.hp-acct__section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  padding: var(--hp-space-acct-section);
  border: 1px solid var(--color-line-card);
  border-radius: var(--radius-card);
  scroll-margin-top: var(--gap-block);
}
/* Field labels are the stylesheet's own (.pm-label: 600 15px), which is what the
   handoff draws, here and on the ticket form. */

/* Two fields side by side (first and last name). */
.hp-acct__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-block);
}
/* The consent checkbox (handoff): the box at the top of a 44px row, 12px from words
   set in the meta type and body ink. */
.hp-acct .pm-check { gap: var(--gap-inline); padding: 0; }
.hp-acct .pm-check__box { margin-top: 0; }
.hp-acct .pm-check__label { font: var(--type-meta) var(--font-text); color: var(--color-ink-body); }
/* A form's button. */
.hp-acct__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--gap-block);
}

/* Country | number. align-items: start so an error under one field does not push
   the other's box down. */
.hp-acct__phone {
  display: grid;
  grid-template-columns: var(--hp-size-country) minmax(0, 1fr);
  gap: var(--gap-inline);
  align-items: start;
}
/* The closed picker is only wide enough for a flag and a dial code; its list has
   country names to show, so it is given its own width instead of the field's: 340px
   from the field's left edge (handoff drop 24, 07b). On a phone it spans the whole
   row, country and number (below). */
.hp-acct__country .pm-selectfield__popover {
  right: auto;
  width: var(--hp-size-country-list);
}
/* Closed, the field holds a flag and a dial code up to "+998", 9px from the flag
   and 9px from the chevron, at both sizes (07b draws 9px; decision 22.12): the
   mock's 112px and 104px were drawn for "+1", and cut a three-digit code short. */
.hp-acct__country .pm-selectfield__trigger { gap: var(--gap-chip); }
.hp-acct__code { max-width: var(--hp-size-code); }
/* "We sent a 6-digit code to (216) 555-0147. ...": the number in the strong ink,
   the lines broken as the mock breaks them (07c). */
.hp-acct__intro { text-wrap: pretty; }
.hp-acct__intro b { font-weight: 600; color: var(--color-ink-strong); }

/* AFTER "VERIFY NUMBER" (handoff drop 24, 07c-07g): the lines under Verify, 9px
   apart -- a wait, a sent or limit line with its glyph, Send a new code, Use a
   different number. On a phone the text actions are 44px tall and carry their own
   space, so the lines between them close up (below). */
.hp-code {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-chip);
}
.hp-code form { display: flex; }
.hp-code form[hidden],
.hp-code__wait[hidden] { display: none; }
.hp-code__wait,
.hp-code__ask {
  margin: 0;
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-subtle);
}
/* The ticking digits keep their place. */
.hp-code__wait { font-variant-numeric: tabular-nums; }
.hp-code__resend {
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gap-glyph);
}
.hp-code__line {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-glyph);
  margin: 0;
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-body);
}
.hp-code__glyph {
  flex: none;
  font-size: var(--size-glyph-sm);
  line-height: var(--hp-line-code-glyph);
}
.hp-code__glyph--done { color: var(--color-status-success-glyph); }
.hp-code__glyph--warning { color: var(--color-status-warning-glyph); }
/* The design system's small text action (TextAction sm: 600 13px/1.2). */
.hp-textaction--sm { font: var(--type-glyph-label) var(--font-text); }

/* What a notification is, and its switches beside it. */
.hp-acct__notify {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hp-size-notify-switches);
  gap: var(--gap-band);
  align-items: start;
}
.hp-acct__notifytext {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
/* The switches: 16px apart, and 2px down so the first sits level with the
   notification's name beside it (handoff). */
.hp-acct__switches {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  padding-top: var(--hp-space-nudge);
}
/* Each switch is a form of its own; what is said about it goes 6px under it. */
.hp-acct__switches form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-glyph);
}

/* A value that is shown, not edited: a small label over it. */
.hp-acct__value {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
}
.hp-acct__valuelabel { font: var(--type-field-label) var(--font-text); color: var(--color-ink-muted); }
.hp-acct__valuetext { font: var(--type-value) var(--font-text); color: var(--color-ink-strong); }
/* "Change password" and "Log out": on a line of their own height, 30px apart. */
.hp-acct__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--gap-band);
}
/* Each is a form (both change state). A flex form is exactly as tall as its
   button; a block one would add a text line's leading around it. */
.hp-acct__links form { display: flex; }
.hp-acct__links .hp-textaction { position: relative; line-height: 1; }

/* ==========================================================================
   Help (handoff screen 08)
   ========================================================================== */

/* The page's two columns are the meeting page's (.pm-detail), to this screen's own
   measurements: the page body's padding around the questions (Q21), 6px from the
   title to its sentence, and 16px between the side column's parts. */
.hp-help { padding: var(--space-page-body); }
.hp-help .pm-detail__header { gap: var(--gap-glyph); }
.hp-help__side { gap: var(--gap-block); padding: var(--hp-space-help-side); }

/* The questions: 52px rows between hairlines, a chevron on the right -- down when
   the answer is closed, up when it is open. <details> does the opening and, through
   their shared `name`, the closing of the others. A hairline above every question
   and one under the last, as the handoff draws them. */
.hp-faq { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-line-row); }
.hp-faq__item { border-top: 1px solid var(--color-line-row); }
.hp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block);
  min-height: var(--size-menu-row);
  padding: var(--space-fact-row) 0;
  font: var(--type-subhead) var(--font-text);
  color: var(--color-ink-strong);
  cursor: pointer;
  /* The browser's own disclosure triangle, in both the engines that draw one. */
  list-style: none;
}
.hp-faq__q::-webkit-details-marker { display: none; }
/* The chevron belongs to the control, so it takes the question's ink (handoff). */
.hp-faq__q i { flex: none; font-size: var(--size-glyph); color: var(--color-ink-strong); }
.hp-faq__open,
.hp-faq__item[open] .hp-faq__closed { display: none; }
.hp-faq__item[open] .hp-faq__open { display: inline-block; }
@media (hover: hover) {
  .hp-faq__q:hover { color: var(--color-action); }
}
.hp-faq__q:active { color: var(--color-action); }
/* An answer stops 36px short of the row's right edge, clear of the chevron above
   it, and is never wider than a row of text should be. */
.hp-faq__a {
  display: flex;
  flex-direction: column;
  gap: var(--gap-chip);
  padding: var(--hp-space-faq-answer);
  max-width: var(--measure-row);
}

/* "Still need help?" in the side column: its parts 16px apart. The signed-out
   "Can't log in?" line and the participants line are body ink with 600 links
   (handoff screen 12). */
.hp-helpside { display: flex; flex-direction: column; gap: var(--gap-block); }
.hp-helpside__button { width: 100%; }
.hp-helpside__signin,
.hp-helpside__participants { color: var(--color-ink-body); }
.hp-helpside__signin a,
.hp-helpside__participants a { font-weight: 600; }
.hp-helpside__participants {
  padding-top: var(--gap-block);
  border-top: 1px solid var(--color-line-row);
}

/* ==========================================================================
   Support ticket (handoff screen 09)
   ========================================================================== */

/* Back link, title, fields and buttons, each 22px from the next (handoff). */
.hp-ticket { gap: var(--gap-group); }
.hp-ticket__form { gap: var(--gap-group); max-width: var(--hp-measure-ticket); }
/* "Send ticket" and "Cancel" on one line, 22px apart, the text action level with the
   button and on a line of its own height. Wide screens only: on a phone the two
   stack, and centring would then move "Cancel" to the middle of the column. */
.hp-ticket__actions { gap: var(--gap-group); padding-top: 0; }
.hp-ticket__actions .hp-textaction { line-height: 1; }
@media not all and (max-width: 767px) {
  .hp-ticket__actions { align-items: center; }
}
/* "Ticket sent": a bordered card where the form was (handoff) -- a check and the
   words as its title, a sentence, and two text links 22px apart. */
.hp-ticket__sent {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  max-width: var(--hp-measure-ticket);
  padding: var(--hp-space-acct-section);
  border: 1px solid var(--color-line-card);
  border-radius: var(--radius-card);
}
.hp-ticket__senttitle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-chip);
  font: var(--type-card-title) var(--font-text);
  color: var(--color-ink-strong);
}
.hp-ticket__senttitle i { font-size: var(--size-glyph-row); color: var(--color-ink-glyph); }
.hp-ticket__sentlinks { display: flex; flex-wrap: wrap; gap: var(--gap-group); }
.hp-ticket__sentlinks .hp-textaction { position: relative; line-height: 1; }

/* ==========================================================================
   Footer -- the stylesheet's, to the handoff's measurements
   ========================================================================== */

/* The finder's text column starts 4px down, to sit level with an org's logo beside
   it. The portal's footer has no org, and the handoff starts the text at the top. */
.pm-footer__info { padding-top: 0; }
/* The crisis glyph: 13px on the text's own line (handoff). The finder's is 12px on a
   line of its own height, which sits it 1px lower. */
.pm-footer__crisis i { font-size: var(--hp-size-crisis-glyph); line-height: inherit; }

/* ==========================================================================
   Time zone line (footer, signed-in pages)
   ========================================================================== */

/* One sentence, set as text: "Times shown in <zone> time zone · Re-detect". The
   zone's weight and ink are the stylesheet's (.pm-footer__tz b). */
/* A text action: the action colour, no button shape. */
.hp-tz__redetect { position: relative; font: inherit; color: var(--color-action); }
@media (hover: hover) {
  .hp-tz__redetect:hover { color: var(--color-action-hover); text-decoration: underline; }
}
.hp-tz__redetect:active { color: var(--color-action-hover); text-decoration: underline; }

@media (max-width: 767px) {
  /* Next meeting: one column, the start panel under a hairline. Everything is 12px
     apart, the rule included (handoff screen 03, mobile). */
  .hp-next {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-inline);
    padding: var(--hp-space-panel-mobile);
  }
  .hp-next__when { gap: var(--gap-hairline) var(--gap-chip); }
  .hp-next__name { gap: var(--gap-hairline); }
  .hp-next__start {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-line-selected);
    padding-top: var(--gap-inline);
  }

  /* A meeting's page: the same padding and every part 12px apart (handoff screen
     05, mobile). The date keeps its 22px here, where the stylesheet's section type
     steps down to 20px (handoff drop 4: "700 22px at both sizes"). */
  .hp-panel .pm-next__when { font: var(--hp-type-next-when) var(--font-display); }
  .hp-panel {
    gap: var(--gap-inline);
    padding: var(--hp-space-panel-mobile);
  }
  .hp-panel__block { gap: var(--gap-inline); }
  /* ...but 9px where the panel is only its text (handoff screen 06, mobile). */
  .hp-panel--done .hp-panel__block { gap: var(--gap-chip); }

  /* Your meetings (handoff screen 03, mobile): 12px from the page head to the panel,
     22px between the panel and each list, 9px from a heading to its rows and
     between rows -- and no well behind them: on a phone the cards sit on the page. */
  .hp-meetings { gap: var(--gap-inline); padding: var(--hp-space-meetings-mobile); }
  .hp-schedule { gap: var(--gap-group); }
  .hp-group { gap: var(--gap-chip); }
  .hp-well {
    gap: var(--gap-chip);
    padding: 0;
    background: none;
    border-radius: 0;
  }

  /* Meeting row: PM1's phone restack as it stands -- a stack on the left (day and
     time, title, program, hint) and the mode in an 84px column on the right --
     minus the rail column it reserves. One thing differs from the finder, and it
     is the handoff's: the mode is centred in its column rather than at its top. The
     program line names the hosts, as on desktop (handoff drop 4). The hint is the
     stack's last line and has no chevron -- the whole card is the link. */
  .hp-row { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .hp-row .pm-listrow__main { grid-column: 1; }
  .hp-row .pm-listrow__time { padding: 0; }
  .hp-row .pm-modeblock { align-self: center; justify-self: center; padding-top: 0; }
  .hp-row__hint {
    align-self: auto;
    justify-content: flex-start;
    text-align: left;
  }
  .hp-row__chevron { display: none; }
  .hp-row__hint--none { display: none; }

  /* A meeting's page: one column, the side column under the body. */
  .hp-detail { grid-template-columns: minmax(0, 1fr); }
  .hp-detail .pm-detail__side { grid-column: 1; }
  /* Body, upcoming dates, note: 22px apart, 28px under the last of them (handoff
     drop 3). The upcoming dates' own parts are 9px apart. */
  .hp-detail__body--more + .pm-detail__side { padding-bottom: var(--gap-group); }
  .hp-detail__after { padding: 0 var(--space-gutter-mobile) var(--hp-space-detail-bottom-mobile); }
  .hp-upcoming { gap: var(--gap-chip); }

  /* ...its body 18px from the bar, and the program line 9px under the title, in the
     smaller type and with its logo the row size (handoff, mobile). */
  .hp-detail .pm-detail__body {
    padding: var(--hp-space-detail-mobile);
    /* The side column always follows the body here; 22px to it. */
    padding-bottom: var(--gap-group);
  }
  .hp-detail__heading { gap: var(--gap-chip); }
  .hp-detail .pm-detail__sub,
  .hp-stop .pm-detail__sub { font: var(--type-meta) var(--font-text); }
  /* The page actions follow the heading: 12px under the line below the title (the
     head's rows are 16px apart, hence the -4px), two to a row, each its cell's
     full width with its label centred and 44px to tap (the design system's
     QuietButton `fullWidth` and `size="tap"`). */
  .pm-detail__header.hp-detail__head { grid-template-columns: minmax(0, 1fr); }
  .hp-detail__actions {
    grid-area: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(var(--gap-inline) - var(--gap-block));
  }
  .hp-detail__actions .pm-quietbutton {
    justify-content: center;
    min-height: var(--size-tap-min);
    text-align: center;
  }
  .hp-program--lead .hp-program__logo {
    width: var(--hp-size-program-logo);
    height: var(--hp-size-program-logo);
  }
  .hp-detail .hp-program__text,
  .hp-stop .hp-program__text {
    max-width: calc(100% - var(--hp-size-program-logo) - var(--gap-glyph));
  }
  /* The back link: 6px above and below its label, and a 44px-tall area to tap laid
     over it rather than made of it (the stylesheet makes the link itself 44px). */
  .pm-action-link--back {
    position: relative;
    min-height: 0;
    padding: var(--gap-glyph) 0;
  }

  /* The two cards: the panel's padding; the code card's parts 12px apart and the
     Attendance card's 9px; a narrower label column, 12px between columns, and 6px
     above and below a value. */
  .hp-codecard,
  .hp-attendance { padding: var(--hp-space-panel-mobile); }
  .hp-codecard { gap: var(--gap-inline); }
  .hp-attendance { gap: var(--gap-chip); }
  .hp-attendance--manual { gap: var(--gap-inline); }
  /* "Attendance to report": the panel's padding on a phone, not the stylesheet's
     16px all round (handoff drop 20, "18px 16px, 12px mobile"). */
  .hp-owed { gap: var(--gap-inline); padding: var(--hp-space-panel-mobile); }
  /* The last 12 meetings: 12px under the hairline, which stands 12px below what
     comes before (the automatic card's 9px plus 3). */
  .hp-attendance__recent { padding-top: var(--gap-inline); }
  .hp-attendance:not(.hp-attendance--manual) .hp-attendance__recent {
    margin-top: calc(var(--gap-inline) - var(--gap-chip));
  }
  /* The reminders menu's popover spans the card's content on a phone, placed against
     the title row rather than the trigger, so a narrower phone does not push it past
     the card, which clips. Drop 28 draws it 326px on a 390px screen, which is the
     content (324px) and 2px of the card's padding on the left. */
  .hp-attendance__titlebar { position: relative; }
  .hp-attendance__titlebar .pm-textmenu { position: static; }
  .hp-attendance__titlebar .pm-textmenu__popover {
    left: calc(var(--hp-space-textmenu-overhang) * -1);
    width: auto;
  }
  /* See full history: 12px under its hairline, and at least 44px to tap. */
  .hp-attendance__more-rule { padding-top: var(--gap-inline); }
  .hp-attendance__more {
    gap: var(--gap-inline);
    min-height: var(--size-tap-min);
  }
  .hp-codecard__rows {
    grid-template-columns: var(--hp-size-code-label-mobile) minmax(0, 1fr) auto;
    gap: 0 var(--gap-inline);
  }
  .hp-codecard__value,
  .hp-codecard__link { padding: var(--gap-glyph) 0; }
  /* Copy is 44px tall here, which is what makes each row 44px (handoff drop 4: a
     real area to tap, where the stylesheet's is padding laid over its neighbours). */
  .hp-codecard .pm-copy { min-height: var(--size-tap-min); margin-block: 0; padding-block: 0; }

  /* The two text links that stay one line of text high on a phone, each with a
     44px area to tap laid over it (see .hp-switch::after for why). Every other text
     action is 44px tall itself (.hp-textaction below; handoff drop 4). */
  .pm-action-link--back::after,
  .hp-tz__redetect::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--size-tap-min);
    transform: translateY(-50%);
  }

  /* THE FOOTER ON A PHONE (handoff drop 12): four lines, 9px apart --
         the time zone
         the crisis line
         Privacy  Terms
         the copyright                     [logo, 32px]
     the last two centred on each other. The stylesheet's phone footer puts the
     legal links beside the crisis line and the logo on a row of its own at the
     bottom. The markup is the same; the three wrappers dissolve so their children
     can be placed on one grid. */
  :root { --space-footer-end: var(--gap-group); }
  .pm-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-chip) var(--gap-inline);
  }
  .pm-footer__row,
  .pm-footer__info,
  .pm-footer__meta { display: contents; }
  .pm-footer__tz { order: 1; grid-column: 1 / -1; }
  .pm-footer__crisis { order: 2; grid-column: 1 / -1; }
  .pm-footer__legal { order: 3; grid-column: 1 / -1; }
  .pm-footer__copyright { order: 4; grid-column: 1; }
  .pm-footer__end { order: 5; grid-column: 2; width: auto; margin: 0; }
  .pm-footer__pathminder img { height: var(--size-footer-logo-mobile); }
  .hp-textaction { min-height: var(--size-tap-min); }

  /* The ticket form (handoff screen 09, mobile): the page body's padding, everything
     16px apart, and a message box five lines tall. */
  .hp-ticket { gap: var(--gap-block); }
  .hp-ticket__form { gap: var(--gap-block); }
  .hp-ticket .pm-textarea { height: var(--hp-size-textarea-mobile); }
  .hp-ticket__sent { gap: var(--gap-chip); padding: var(--hp-space-panel-mobile); }
  /* The two links one above the other, each 44px tall, with nothing between. */
  .hp-ticket__sentlinks { flex-direction: column; gap: 0; }
  /* "Cancel" under the button, in the middle, 16px away like the form's other
     parts (handoff drop 4). */
  .hp-ticket__actions { gap: var(--gap-block); }
  .hp-ticket__actions .hp-textaction { align-self: center; }

  /* Help (handoff screen 08, mobile): the title and then the questions, 16px apart;
     a question's label 12px from its chevron and 12px from the hairlines; an answer
     the full width; and "Still need help?" as a filled box under them. */
  .hp-detail .hp-help { padding: var(--hp-space-help-mobile); gap: var(--gap-block); }
  .hp-faq__q { gap: var(--gap-inline); padding: var(--gap-inline) 0; }
  .hp-faq__a { padding: 0 0 var(--gap-block); }
  .hp-help__side { padding: var(--space-detail-side-mobile); }
  .hp-helpside {
    gap: var(--gap-inline);
    padding: var(--hp-space-panel-mobile);
    background: var(--color-surface-hover);
    border-radius: var(--radius-card);
  }
  /* The pointer for participants: 12px under the button's block, over the card
     hairline (the block is grey here, where the row hairline would not show). */
  .hp-helpside__participants { padding-top: var(--gap-inline); border-top-color: var(--color-line-card); }

  /* An attendance report on a phone (handoff screen 11): the page body's padding, the
     date line in the smaller meta type, the back link's 44px area to tap laid over
     its neighbours (its 6px above and below given back), and the panel's padding
     the meeting page's. The count, its label and the closed message are centred
     in the panel, the number on a line of its own in the 56px count type -- the
     design system's one large number, once per screen. */
  .hp-report__when { font: var(--type-meta) var(--font-text); }
  .hp-report .pm-action-link--back { margin: calc(var(--gap-glyph) * -1) 0; }
  .hp-report__panel { padding: var(--hp-space-panel-mobile); }
  /* Screen 15, a phone: the white card's "Turn reminders back on" is full width,
     as the task's button is. */
  .hp-stop .hp-report__panel form,
  .hp-stop .hp-report__panel .pm-button { width: 100%; }
  .hp-report__count,
  .hp-report__closed { align-items: center; text-align: center; }
  .hp-report__figure { flex-direction: column; align-items: center; }
  .hp-report__number { font: var(--type-count-field) var(--font-text); font-variant-numeric: tabular-nums; }
  .hp-report__people { font: var(--type-body) var(--font-text); }
  /* The glyph at the top of a label that may wrap, on the label's first line. */
  .hp-report__closedtitle { align-items: flex-start; }
  /* "Cancel" under "Update count", centred, 44px tall to tap (as the ticket form's). */
  .hp-report__cancel { margin-inline: auto; }

  /* Account: no jump links -- four sections is a short scroll -- and the sections
     are separated by hairlines instead of boxed (handoff, mobile). */
  .hp-acct__layout { grid-template-columns: minmax(0, 1fr); }
  .hp-acct__nav { display: none; }
  /* 22px above each hairline and 22px under it; nothing under the last section but
     the page's own bottom padding. */
  .hp-acct__section {
    padding: var(--gap-group) 0 0;
    border: 0;
    border-top: 1px solid var(--color-line-row);
    border-radius: 0;
  }
  .hp-acct__pair { grid-template-columns: minmax(0, 1fr); }
  /* The country list spans the whole row, country and number, 4px past each side
     as the field's own list does (handoff drop 24, 07b mobile): the row holds it,
     not the narrow field. */
  .hp-acct__phone { position: relative; }
  .hp-acct__country .pm-selectfield { position: static; }
  .hp-acct__country .pm-selectfield__popover {
    width: auto;
    right: calc((var(--focus-offset) + 2px) * -1);
  }
  /* The lines under Verify: the 44px text actions carry their own space, so
     nothing is added around them; text lines stay 9px apart (07c-07f mobile). */
  .hp-code { gap: 0; }
  .hp-acct__code { max-width: none; }
  .hp-code__line + .hp-code__wait { margin-top: var(--gap-chip); }
  /* Buttons are full width. */
  .hp-acct__actions { flex-direction: column; align-items: stretch; }
  .hp-acct__actions .pm-button { width: 100%; }
  .hp-acct__notify { grid-template-columns: minmax(0, 1fr); gap: var(--gap-block); }
  /* The switches side by side, 30px apart, under the text. */
  .hp-acct__switches { flex-direction: row; gap: var(--gap-band); padding-top: 0; }
}

/* ==========================================================================
   A meeting's attendance history (handoff drop 17, screen 13)
   ========================================================================== */

/* The head, then (22px) the controls and the card, 16px apart. */
.hp-history { gap: var(--gap-group); }
.hp-history__part {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* THE CONTROLS: the finder's tab rail and view toggle (.pm-viewrail), in the page
   body rather than across the card: no gutter, the row's hairline, the toggle
   centred on the row (handoff: "centred on the row"). */
.hp-history__controls {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-block);
  padding: 0;
  border-bottom-color: var(--color-line-row);
}
.hp-history__toggle { margin-bottom: 0; }


/* THE CARD: white, the card's edge and corners. */
.hp-history__card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-line-card);
  border-radius: var(--radius-card);
}
/* Its head: the range and the sentence, 6px apart; Export CSV at the right. */
.hp-history__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--gap-glyph) var(--gap-block);
  padding: var(--hp-space-history-head);
}
.hp-history__title { grid-column: 1; grid-row: 1; margin: 0; }
.hp-history__summary {
  grid-column: 1;
  grid-row: 2;
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
}
.hp-history__export {
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1;
}
.hp-history__export i { font-size: var(--size-glyph-sm); }

/* THE LIST. Desktop: the date (150px), the line about it, the count columns
   (84px, right-aligned); a hairline above every row. */
.hp-history__row {
  display: flex;
  align-items: center;
  gap: var(--gap-block);
  min-height: var(--hp-size-history-row);
  box-sizing: border-box;
  padding: var(--hp-space-history-row);
  border-top: 1px solid var(--color-line-row);
}
.hp-history__row--heads {
  min-height: 0;
  padding: var(--hp-space-history-heads);
  border-top: 0;
  font: var(--type-eyebrow) var(--font-text);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
/* The date and its line: two columns here, one over the other on a phone. */
.hp-history__when {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-block);
}
.hp-history__date {
  flex: 0 0 var(--hp-size-history-date);
  font: var(--type-label) var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-strong);
}
.hp-history__date--muted { color: var(--color-ink-muted); }
.hp-history__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-hairline) var(--gap-inline);
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-muted);
}
.hp-history__report { line-height: 1; }
.hp-history__until {
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-subtle);
}
.hp-history__cell {
  flex: 0 0 var(--hp-size-history-count);
  text-align: right;
  font: var(--type-row-title) var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-strong);
}
.hp-history__row--heads .hp-history__date,
.hp-history__row--heads .hp-history__cell { font: inherit; color: inherit; }
.hp-history__note {
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-subtle);
}
.hp-history__mobile { display: none; }
/* A month's label row, in a long list of daily dates (handoff 13k). */
.hp-history__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-block);
  padding: var(--hp-space-history-group);
  border-top: 1px solid var(--color-line-row);
}
.hp-history__group-label {
  font: var(--type-field-label) var(--font-text);
  color: var(--color-ink-muted);
}
.hp-history__group-average {
  font: var(--type-meta) var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

/* THE CHART, inset as the list's rows are. */
.hp-history__chart { padding: var(--hp-space-history-chart); }

/* NOTHING YET (13h). */
.hp-history__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-glyph);
  padding: var(--hp-space-history-empty);
  border-top: 1px solid var(--color-line-row);
  text-align: center;
}
.hp-history__empty-title {
  font: var(--type-label) var(--font-text);
  color: var(--color-ink-strong);
}
.hp-history__empty-text {
  max-width: var(--measure-explainer);
  font: var(--type-meta) var(--font-text);
  color: var(--color-ink-body);
  text-wrap: pretty;
}

/* The 12 months' footnote under a hairline; any other card ends 9px below its
   last row. */
.hp-history__foot {
  margin: 0;
  padding: var(--hp-space-history-foot);
  border-top: 1px solid var(--color-line-row);
  font: var(--type-helper) var(--font-text);
  color: var(--color-ink-subtle);
}
.hp-history__end { height: var(--gap-chip); }

@media (max-width: 767px) {
  .hp-history__schedule { font: var(--type-meta) var(--font-text); }
  .hp-history .pm-action-link--back { margin: calc(var(--gap-glyph) * -1) 0; }
  /* The tabs on the hairline and the toggle clear of it (handoff drop 29; design-
     system request part 5): the row sets its items on its bottom edge, and the
     toggle group stands 6px off the hairline and 6px under the row's top. Without
     tabs as tall as the finder's, the toggle would otherwise sit on the line. */
  .hp-history__controls { align-items: flex-end; gap: var(--gap-chip); flex-wrap: nowrap; }
  .hp-history__toggle { align-self: flex-end; padding: var(--gap-glyph) 0; }
  /* The glyph is the toggle's only content here: a box of its own size, or the icon
     font's lowered glyph adds a pixel under it. */
  .hp-history__toggle i { display: flex; }

  /* The head: the title with Export CSV beside it (44px to tap), the sentence
     under both. */
  .hp-history__head {
    align-items: center;
    gap: var(--gap-glyph) var(--gap-inline);
    padding: var(--hp-space-history-head-mobile);
  }
  .hp-history__export { grid-row: 1; min-height: var(--size-tap-min); }
  .hp-history__summary { grid-column: 1 / -1; }

  /* A row: the date with its line under it, then the 56px count columns. */
  .hp-history__row {
    gap: var(--gap-inline);
    min-height: var(--hp-size-history-row-mobile);
    padding: var(--gap-chip) var(--space-gutter-mobile);
  }
  .hp-history__row--heads {
    min-height: 0;
    padding: 0 var(--space-gutter-mobile) var(--gap-chip);
  }
  .hp-history__when {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-hairline);
  }
  .hp-history__date { flex: none; }
  /* A canceled date: its chip on the date's line, 9px after it and centred on it,
     as on desktop (handoff drop 30); its count columns are empty, so not drawn,
     which leaves the chip room on a hybrid meeting's row too. */
  .hp-history__row--canceled .hp-history__when {
    flex-direction: row;
    align-items: center;
    gap: var(--gap-chip);
  }
  .hp-history__row--canceled .hp-history__cell { display: none; }
  .hp-history__cell {
    flex-basis: var(--hp-size-history-count-mobile);
    font: var(--type-row-title-m) var(--font-text);
    font-variant-numeric: tabular-nums;
  }
  /* A head wider than its column (IN-PERSON) runs left into the gap beside it,
     right-aligned and on one line -- never cut short. */
  .hp-history__row--heads .hp-history__cell {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
  }
  .hp-history__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-hairline);
    font: var(--type-helper) var(--font-text);
    color: var(--color-ink-subtle);
  }
  /* Nothing to say on a phone (an empty line, or one for desktop only): no line. */
  .hp-history__meta:empty,
  .hp-history__meta:has(> .hp-history__desktop:only-child),
  .hp-history__row--heads .hp-history__meta { display: none; }
  /* "Report attendance" 44px tall to tap, without making the row taller. */
  .hp-history__report {
    min-height: var(--size-tap-min);
    margin: calc(var(--gap-chip) * -1) 0;
  }
  .hp-history__desktop { display: none; }
  .hp-history__mobile { display: inline; }

  .hp-history__group { padding: var(--gap-block) var(--space-gutter-mobile) var(--gap-chip); }
  .hp-history__chart { padding: 0 var(--space-gutter-mobile) var(--gap-barchart-value); }
  .hp-history__empty { padding: var(--hp-space-history-empty-mobile); }
  .hp-history__empty-text { max-width: none; }
  .hp-history__foot { padding: var(--hp-space-history-foot-mobile); }
  .hp-history__end { height: var(--hp-size-history-end-mobile); }
}