/* 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; 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 {
  /* ---- Navbar: the dark override.
   * The design system's navbar is light by default and takes a "dark override" of
   * these same eight tokens for a tenant with a dark brand fill. The portal's fill is
   * Pathminder's brand navy, matching pathminder.co.
   *
   * The line equals the fill so the bar reads as one block (no bottom rule).
   * Inactive links are white rather than a tint: the handoff draws every link white
   * and marks the current one with colour + the 3px rail.
   *
   * NOTE the active colour. The Design Standards say the active link on a dark bar is
   * white; the host portal handoff specifies this cyan (from the logo palette). The
   * handoff is followed here and the difference is raised with the designer -- see
   * docs/plans/host-portal.md, Open items. Ink and rail stay equal, as the Standards
   * require, so only one value would change. */
  --color-nav-bg: #00384D;
  --color-nav-line: #00384D;
  --color-nav-ink: #ffffff;
  --color-nav-muted: #ffffff;
  --color-nav-active-ink: #6EDEF9;
  --color-nav-active-line: #6EDEF9;

  /* ---- 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: 64px;
  --space-intro-overlap-mobile: 40px;

  /* ---- Portal-only values (hp-*). */
  --hp-size-nav-logo: 36px;            /* the reversed logo in the navbar */
  --hp-size-nav-logo-mobile: 34px;
  --hp-size-nav-item: 60px;            /* a link's box in the desktop bar: 3px + label + 3px rail */
  --hp-space-nav-item: 1px;            /* ... and the room beside its label */
  --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;
  --hp-color-image-placeholder: #e3f1f8; /* an image slot with no image yet */

  /* ---- Notes: 13px above and below the text, 15px at the sides (handoff). PM1's
   * note box is 1px roomier each way. */
  --space-note: 13px 15px;

  /* ---- Footer: 24px under its last line (handoff). PM1's is 36px; 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. Every page the handoff draws starts 26px
     under the bar (22px on a phone) with the gutter at its sides; what is under the
     last thing varies, and 48px (30px on a phone) is what Account and the ticket
     form have. Pages the handoff does not draw (errors, an attendance report) take
     these. Your meetings ends closer to its footer and has its own. */
  --hp-space-page: 26px var(--space-gutter) var(--gap-page);
  --hp-space-page-mobile: var(--gap-group) var(--space-gutter-mobile) var(--gap-band);
  --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-space-detail-mobile: 18px 16px 28px; /* a page that opens with a back link, on a phone */
  --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): what is typed is 400 16px on a line of its own height,
   * 14px in from the box's edge. PM1's input is 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: 112px;            /* the phone country picker, closed */
  --hp-size-country-mobile: 104px;
  --hp-size-country-list: 280px;       /* ... and its list, which has names to fit */
  --hp-size-code: 200px;               /* the verification code field */
  --hp-size-notify-switches: 160px;    /* the Email / SMS switch column */

  /* Help and the support ticket (handoff screens 08 and 09). */
  --hp-space-help: 26px var(--space-gutter) 36px;      /* the questions' column */
  --hp-space-help-side: 26px 28px 36px;                /* "Still need help?" beside it */
  --hp-space-help-mobile: var(--gap-group) 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 */
}

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

/* THE BAR IS ONE 64px ROW AT BOTH SIZES, WITH EVERYTHING IN IT ON ITS CENTRE LINE
   (handoff drop 6). The designer measured the design system's bar and found its
   contents off centre: the desktop links about 2.5px above "Host portal" (they are
   padded 20px above and 22px below), and the phone's logo and label 2px high (its
   row is sized around a 1px bottom line). So the portal does not take the bar as it
   comes. Here:

     - the bar has no bottom line, and its row is exactly 64px tall;
     - the row's two groups are centred in it (the stylesheet already does that);
     - nothing in the row has padding above or below, and every label is set on a
       line of its own height, so "centred" means the text itself is.

   The handoff lists this under "Deviations from the design system", with a note
   that the design system's own navbar should adopt it. */
.pm-navbar { border-bottom: 0; }
.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 a line of its own height. The finder's is
     12px at 70%. */
  font-size: var(--size-glyph-chevron);
  line-height: 1;
  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) {
  /* A LINK IN THE BAR IS A 60px BOX (handoff drop 6): a 3px clear border on top, the
     3px rail as its bottom border (clear unless it is the current page), and its
     label in the middle. The box is centred in the 64px bar, so the label sits on
     the bar's centre line with "Host portal", and the rail stops 2px short of the
     bar's bottom edge. The stylesheet's link has 20px above its label and 22px
     below, which is what put the labels 2.5px high. */
  .pm-nav a,
  .hp-nav__logout button {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--hp-size-nav-item);
    padding: 0 var(--hp-space-nav-item);
    border-top: var(--size-active-rail) solid transparent;
    line-height: 1;
  }
}

@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 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); }

  /* 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 --hp-space-page)
   ========================================================================== */

.pm-card__body { padding: var(--hp-space-page); }
@media (max-width: 767px) {
  .pm-card__body { padding: var(--hp-space-page-mobile); }
}

/* ==========================================================================
   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 with 16px all round, at both
   widths (handoff drop 7). 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); }
.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 image slot before real photography exists: the same box the image would
   occupy, in the placeholder fill. */
.pm-intro__image--placeholder { background: var(--hp-color-image-placeholder); }

/* 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); }
/* Kicker, title and sentence, 9px apart and no wider than 600px. 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__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, fenced off from the host's own actions 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. */
.hp-home__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-home__participants p { flex: 1; min-width: 0; }
.hp-home__participants strong { font-weight: 600; color: var(--color-ink-strong); }
.hp-home__participants a { font-weight: 600; }
.hp-home__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); }
  /* 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-home__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);
}

/* ---- Program line: logo, program, hosts ------------------------------------ */
/* As the handoff builds it, at both widths: 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 -- a row on a phone -- whole items move to the next line, 3px
   down: the hosts go under the program, starting from the line's left edge, and the
   dot stays where it was. (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); }

/* 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: fill only). The stylesheet's 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; }

/* ---- 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); }

/* ---- Attendance to report ---------------------------------------------------
   A row in the well, like a meeting row but simpler: what and when on the left,
   what to do on the right. The whole row is the link. */
.hp-due {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block);
  padding: var(--space-row);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line-card);
  border-radius: var(--radius-card);
}
@media (hover: hover) {
  .hp-due:hover { border-color: var(--color-line-control); text-decoration: none; }
}
.hp-due:active { border-color: var(--color-line-control); text-decoration: none; }
.hp-due__what {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
  min-width: 0;
}
.hp-due__do {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font: var(--type-label) var(--font-text);
  color: var(--color-action);
}

/* ==========================================================================
   An attendance report (the form a reminder's link opens)
   ========================================================================== */

.hp-report__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-chip);
}
/* One short number: the field is no wider than it needs to be on desktop. */
.hp-report__count { max-width: var(--hp-size-code); }
.hp-report__result {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
}

/* ==========================================================================
   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 screen 05): back link, mode, title and the program line, 12px
   apart. 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; }

/* The line under the title: logo, program, dot, number, dot, link -- 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 {
  align-items: center;
  gap: var(--gap-hairline) var(--gap-glyph);
}
.hp-detail .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 {
  max-width: calc(100% - var(--hp-size-program-logo-lead) - var(--gap-glyph));
}
.hp-detail__finder { font-weight: 600; }

/* ---- 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.

   The card a host reports from (handoff screen 06) groups its heading and sentence
   6px apart, and puts 16px between that group and each part after it. */
.hp-attendance--manual { gap: var(--gap-block); }
.hp-attendance__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
/* The switch's form is exactly as tall as the switch (a block form would add a text
   line's leading around it). The gap is for the Save button it has when there is no
   script to save the switch as it is flipped. */
.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). */
.hp-detail .pm-fact__value a { 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. */
.hp-upcoming__flag {
  font: var(--type-caption) var(--font-text);
  font-weight: 600;
  color: var(--color-canceled);
}
.hp-upcoming__row--canceled .hp-upcoming__day,
.hp-upcoming__row--canceled .hp-upcoming__time {
  color: var(--color-ink-muted);
  text-decoration: line-through;
}

/* ==========================================================================
   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), and the one sentence that is
   about both of them 6px under the pair, where a field's own helper sits. */
.hp-acct__name {
  display: flex;
  flex-direction: column;
  gap: var(--gap-glyph);
}
.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. */
.hp-acct__country .pm-selectfield__popover {
  right: auto;
  width: var(--hp-size-country-list);
}
.hp-acct__code { max-width: var(--hp-size-code); }

/* 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: 36px under each column, 6px from the title to its sentence, and
   16px between the side column's parts. */
.hp-help { padding: var(--hp-space-help); }
.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. */
.hp-helpside { display: flex; flex-direction: column; gap: var(--gap-block); }
.hp-helpside__button { width: 100%; }
.hp-helpside__participants {
  padding-top: var(--gap-block);
  border-top: 1px solid var(--color-line-row);
  color: var(--color-ink-body);
}
.hp-helpside__participants a { font-weight: 600; }

/* ==========================================================================
   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--text .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 its header's parts 9px apart, with the
     program line in the smaller type and 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);
  }
  .pm-detail__header { gap: var(--gap-chip); }
  .hp-detail .pm-detail__sub { font: var(--type-meta) var(--font-text); }
  .hp-program--lead .hp-program__logo {
    width: var(--hp-size-program-logo);
    height: var(--hp-size-program-logo);
  }
  .hp-detail .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); }
  .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): four lines, 9px apart --
         the time zone
         the crisis line
         Privacy  Terms                    [logo, 32px]
         the copyright
     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; }
  .pm-footer__end { order: 4; grid-column: 2; width: auto; margin: 0; }
  .pm-footer__copyright { order: 5; grid-column: 1 / -1; }
  .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): 18px under the bar, everything 16px
     apart, and a message box five lines tall. */
  .hp-ticket { gap: var(--gap-block); padding: var(--hp-space-detail-mobile); }
  .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); }

  /* A report's number field is full width on a phone (its button already is: every
     .hp-gate__actions button, above). */
  .hp-report__count { max-width: none; }

  /* 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); }
  .hp-acct__phone { grid-template-columns: var(--hp-size-country-mobile) minmax(0, 1fr); }
  /* The 104px picker has 51px for its value at the handoff's 12px gap, and "+353"
     under a flag needs 55px. A 6px gap leaves the flag, the code and the chevron
     exactly where they are and gives the value the room. */
  .hp-acct__country .pm-selectfield__trigger { gap: var(--gap-glyph); }
  /* 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; }
}