/* page-contact.css: Plant Toolbox contact (wrapper #p-contact).
   Generated by .plans/site-overhaul/tools/port.py from ptb-site-overhaul-src/css/p-contact.css.
   Production state: P1 light ("Light steel") only, review flags and mockup chrome removed. Loaded after site.css. */

/* ==== p-contact.css ==== */
/* ==========================================================================
   p-contact.css · inner page "Contact" (#p-contact). Every selector starts with #p-contact (one exception: the
   reCAPTCHA badge rule, which must reach <body>).
   Ported from Ryca p-contact.css (form 7 / detail column 5 from 1100; panelled detail blocks), plus PTB's two
   booking cards (60-minute walkthrough, 30-minute discovery call) under the H1. "What happens next" is cut (D87).
   Grounds: header and paths share --bg (the two booking cards sit right under the lead, D87) · form (bg, so the
   surface inputs read).
   CSS-only states (no script):
     - the form's first row is a required "What would help" radio row. A checked intent shows its one-line hint.
       Links preselect an intent in PHP, not with :target (D84): /contact?ask=<demo|walk|start|security|other>#pc-write
       makes 03-write.php print `checked` on that radio ('walk' is an alias of 'demo', 'security' of 'other' since the
       questionnaire-pack choice was cut; any other value selects none).
     - required fields show their .field-error after the person leaves them empty or wrong (:user-invalid);
       Work email has no standing hint: contact.js shows "Use a company address, not Gmail, Yahoo, Outlook, etc." in red
       once a free-mail domain is typed (its pattern still rejects the free-mail brands without script)
     - Send is a real submit button. While the form is :invalid it looks muted with a hint, and the browser's own
       validation blocks it and focuses the first missing field; valid, it turns primary with "Ready to send."
     - live site: a valid submit calls the existing processRC() (content/js/style.js, reCAPTCHA v3, then
       content/action.php). The server's reply is written into .statusMsg (.pc-result), which takes no space while
       it is empty and replaces the wait/ready hint once it has text. There is no client-side "sent" panel.
     - the agenda bar is the page's one mark (D87): a hovered agenda row keeps its segment full and dims the rest.
     - the reCAPTCHA v3 badge is hidden; Google's disclosure line is printed under Send instead (D85).
   Colour and type (D86): the chosen chips, the ticked box and every focus ring take the site's PTB blue from the
   shared tokens (--select-*, --field-focus, --focus; site.css section 1), so this file sets none of them and draws
   no tick of its own. A valid field keeps its plain edge (no green). Labels, the kicker, "Best for", the notes, the
   status and the side headings are sans; mono is kept for the agenda times (.pc-t) and the bar's two end ticks.
   Phone: single column, Send and path buttons full width, chips wrap.
   ========================================================================== */

/* Header and booking cards share one ground (D87): no rule under the header, no tint slab, no empty band above
   the cards (their H2 is visually hidden). */
#p-contact .page-header { padding-bottom: 0; }
#p-contact .page-header::before { display: none; }
#p-contact .pc-paths { padding-top: var(--s-5); }
@media (min-width: 768px) {
  #p-contact .pc-paths { padding-top: var(--s-6); }
}

/* Two paths ----------------------------------------------------------------------------------------- */
#p-contact .pc-path-grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  #p-contact .pc-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Each card is as tall as its own agenda, so the 30-minute card has no hole above its CTA (D87). */
#p-contact .pc-path {
  --pc-pad: 24px;
  --pc-bar: var(--teal);
  container: pc-path / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--pc-pad);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-decision);
}
@media (max-width: 767px) {
  #p-contact .pc-path { --pc-pad: 20px; }
}
@media (min-width: 1100px) {
  #p-contact .pc-path { --pc-pad: 32px; }
}
#p-contact .pc-path--demo { box-shadow: inset 0 2px 0 var(--teal); }
#p-contact .pc-path--call { --pc-bar: var(--ink-2); }
#p-contact .pc-path-k {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  max-width: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--teal-ink);
}
#p-contact .pc-path-k span + span::before { content: "\00B7"; margin-right: var(--s-3); color: var(--ink-3); }
#p-contact .pc-path h3 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
#p-contact .pc-path-lede { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
#p-contact .pc-path-for { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#p-contact .pc-k {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-3);
}

/* The agenda bar, the page's one mark (D87): one segment per agenda row, sized by its minutes (--n), 12 px tall, in
   full --pc-bar (the PTB blue on the 60-minute card, --ink-2 on the 30-minute card), with its two end ticks below
   (00 and the card's length). Hidden from assistive tech; the rows carry the times. */
#p-contact .pc-scale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--s-1);
  margin-top: var(--s-1);
}
#p-contact .pc-path--call .pc-scale { display: none; } /* J2-18: the 60-minute bar is the page's one mark; the call keeps its rows. */
#p-contact .pc-bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 12px; }
#p-contact .pc-bar span {
  flex: var(--n, 1) 1 0;
  min-width: 0;
  background: var(--pc-bar);
  transition: background-color var(--t-fast) ease-out;
}
#p-contact .pc-bar span:first-child { border-radius: 2px 0 0 2px; }
#p-contact .pc-bar span:last-child { border-radius: 0 2px 2px 0; }
#p-contact .pc-tick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
#p-contact .pc-tick::before { content: ""; width: 1px; height: 4px; background: currentColor; }
#p-contact .pc-tick:last-child { align-items: flex-end; }
#p-contact .pc-agenda { border-top: 1px solid var(--hairline); }
#p-contact .pc-agenda li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: baseline;
  margin-inline: calc(var(--s-2) * -1);
  padding: var(--s-2);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--t-fast) ease-out;
}
#p-contact .pc-agenda li:hover { background: var(--bg-subtle); }
#p-contact .pc-t { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
#p-contact .pc-path--call .pc-t { color: var(--ink-2); }
#p-contact .pc-a { min-width: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
/* Hover link: a hovered agenda row keeps its own segment full and dims the others. */
#p-contact .pc-path:has(.pc-agenda li:hover) .pc-bar span { background: color-mix(in srgb, var(--pc-bar) 30%, transparent); }
#p-contact .pc-path:has(.pc-agenda li:nth-child(1):hover) .pc-bar span:nth-child(1),
#p-contact .pc-path:has(.pc-agenda li:nth-child(2):hover) .pc-bar span:nth-child(2),
#p-contact .pc-path:has(.pc-agenda li:nth-child(3):hover) .pc-bar span:nth-child(3),
#p-contact .pc-path:has(.pc-agenda li:nth-child(4):hover) .pc-bar span:nth-child(4),
#p-contact .pc-path:has(.pc-agenda li:nth-child(5):hover) .pc-bar span:nth-child(5),
#p-contact .pc-path:has(.pc-agenda li:nth-child(6):hover) .pc-bar span:nth-child(6) { background: var(--pc-bar); }
/* CTA foot: "Best for" sits beside the button once the card is wide enough (container query), else above it.
   No rule of its own: the agenda's last row already draws the hairline above it. */
#p-contact .pc-path-cta {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-2);
}
/* The button stands alone (owner ask 2026-10-26: the "Opens Zoom Scheduler" note is cut), so beside "Best for" it
   centres on that text instead of hanging from its top. */
#p-contact .pc-path-go { display: grid; justify-items: start; min-width: 0; }
@media (max-width: 719px) {
  #p-contact .pc-path-cta .btn { width: 100%; }
}
@container pc-path (min-width: 480px) {
  #p-contact .pc-path-cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); align-items: center; }
  #p-contact .pc-path-cta .btn { width: auto; }
}
#p-contact .pc-paths-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-6);
  max-width: none;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Form and detail column: 8 / 4 from 1100 ------------------------------------------------------------ */
/* Owner ask 2026-10-26 (a tighter form): the section keeps less ground than the site's 96/120 px band, the head drops
   its eyebrow and sits closer to the form, and the form takes 8 of 12 columns (the side is one small card now), so
   from about 1140 px the four intent chips share one row and Work email's hint fits one line. */
#p-contact .pc-write { padding-block: var(--s-7); }
@media (min-width: 768px) {
  #p-contact .pc-write { padding-block: var(--s-8); }
}
#p-contact .pc-write .section-head { gap: var(--s-3); margin-bottom: var(--s-6); }
#p-contact .pc-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1100px) {
  #p-contact .pc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; }
  #p-contact .pc-main { grid-column: 1 / span 8; }
  /* Contact details stay in view beside the form (owner ask 2026-10-26): sticky under the site's sticky header, inside
     the grid row, so it stops at the form's last line and never reaches the footer. Static when stacked. */
  #p-contact .pc-side {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    align-self: start;
  }
}
#p-contact .pc-main,
#p-contact .pc-side { min-width: 0; }
#p-contact .pc-stack { min-width: 0; }
#p-contact .pc-form { display: grid; gap: var(--s-4); min-width: 0; }
#p-contact .pc-form .form-grid { gap: var(--s-4) var(--s-5); }
/* Narrow phones: the five headcount ranges no longer fit one row (they do from about 560 px), so they fill two even
   rows, three then two, instead of a ragged wrap (the legend stays above the grid; a browser without grid on
   fieldset keeps the plain chip wrap). */
@media (max-width: 559px) {
  #p-contact .pc-headcount { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
  #p-contact .pc-headcount label { grid-column: span 2; margin: 0; }
  #p-contact .pc-headcount label:nth-of-type(n+4) { grid-column: span 3; }
  #p-contact .pc-headcount span { width: 100%; justify-content: center; }
}

/* Select: the native control with a drawn chevron; the empty choice reads as a placeholder. */
#p-contact .pc-select { position: relative; display: block; min-width: 0; }
#p-contact .pc-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
#p-contact .pc-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border: solid var(--ink-2);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
#p-contact .pc-select select:invalid { color: var(--ink-3); }
#p-contact .pc-select option { color: var(--ink); background: var(--surface); }

/* Field states: errors appear only after a person has touched the field. */
#p-contact .field-error { display: none; }
#p-contact .field:has(:user-invalid) .field-error { display: flex; }
#p-contact .field:has(:user-invalid) .field-hint { display: none; }
#p-contact .input:user-invalid,
#p-contact .textarea:user-invalid { border-color: var(--danger-ink); }
/* Work email (owner ask 2026-10-27): the free-mail line shows only while contact.js marks the field .is-freemail,
   live as the domain is typed, and takes the place of the plain "Enter your work email." error. */
#p-contact #pc-email-free { display: none; }
#p-contact .is-freemail #pc-email-free { display: flex; }
#p-contact .is-freemail #pc-email-err { display: none; }
#p-contact .is-freemail .input { border-color: var(--danger-ink); }
/* Your role, Other (owner ask 2026-10-27): the full-width "What is your role?" row under Company and Your role shows
   only while contact.js keeps its input enabled, i.e. while Other is chosen. */
#p-contact .pc-role-other:has(:disabled) { display: none; }
#p-contact .form-grid .field { align-content: start; }
#p-contact .chip-filter legend { display: block; width: 100%; }
#p-contact .chip-filter legend .field-req {
  display: inline;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-3);
}
#p-contact .chip-filter label { margin-bottom: var(--s-1); }

/* Intent row: one hint line per intent, shown when that intent is checked. A link preselects an intent through
   ?ask= (PHP prints `checked`, D84), so a linked intent is a real selection and shows its hint like a clicked one. */
#p-contact .pc-hint { display: none; }
#p-contact:has(#pc-ask-walk input:checked) .pc-hint-walk,
#p-contact:has(#pc-ask-start input:checked) .pc-hint-pilot,
#p-contact:has(#pc-ask-other input:checked) .pc-hint-other { display: block; }
#p-contact .pc-form .textarea { min-height: 120px; }
/* Consent, Send and the legal line read as one group (owner ask 2026-10-26): one hairline above the consent row
   splits the fields from sending, and the rows below sit close under it. */
#p-contact .pc-consent { margin-top: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--hairline); cursor: pointer; }
#p-contact .pc-consent .checkbox { margin-top: 2px; cursor: pointer; }
/* The ticked box is the shared .checkbox (D01): a PTB blue fill with its own white tick, so no tick is drawn here. */
#p-contact .pc-consent .checkbox:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#p-contact .pc-consent .checkbox:user-invalid { border-color: var(--danger-ink); }
/* The privacy-policy link sits outside the consent label (D85), so a tap on it never toggles the box, and it is
   indented to the label's text (20 px box + the row gap). */
#p-contact .pc-consent-note {
  margin-top: calc(var(--s-3) * -1);
  padding-left: calc(20px + var(--s-3));
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Actions: Send looks muted until the form is valid; it stays a working submit button, so a press on an invalid
   form runs the browser's validation (blocks the send, focuses the first missing field, shows the errors). */
#p-contact .pc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-1);
}
#p-contact .pc-send { min-width: 160px; }
#p-contact .pc-form:invalid .pc-send {
  background: var(--track);
  border-color: var(--track);
  color: var(--ink-3);
}
#p-contact .pc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
#p-contact .pc-status--ready { display: none; font-weight: 600; color: var(--ok-ink); }
#p-contact .pc-form:valid .pc-status--wait { display: none; }
#p-contact .pc-form:valid .pc-status--ready { display: inline-flex; }
@media (max-width: 719px) {
  #p-contact .pc-send { width: 100%; }
}
/* Under Send: Google's reCAPTCHA disclosure (D85) on its own small line. The booking note that sat above it is cut
   (owner ask 2026-10-26: the buttons are clear). */
#p-contact .pc-legal { flex: 1 1 100%; max-width: none; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--ink-3); }
#p-contact .pc-legal a { color: inherit; text-decoration: underline; }
#p-contact .pc-legal a:hover { color: var(--link-hover); }
/* reCAPTCHA v3 badge (D85): Google allows hiding it while the disclosure above is visible in the flow. Unscoped on
   purpose: the badge is appended to <body>, outside #p-contact, and this file loads only on /contact. */
.grecaptcha-badge { visibility: hidden; }

/* Server reply (.statusMsg, filled by style.js): while empty it is taken out of the flex row (no item, so no row gap)
   but stays in the accessibility tree, so the live region exists before its text arrives. */
#p-contact .pc-result {
  flex: 1 1 100%;
  min-width: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
#p-contact .pc-result:empty { position: absolute; }
#p-contact .pc-result:not(:empty) {
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  box-shadow: inset 2px 0 0 var(--teal);
}
#p-contact .pc-actions:has(.pc-result:not(:empty)) .pc-status { display: none; }

/* Detail column: one panelled block, Contact details ("Already a customer?" is cut, owner ask 2026-10-26) ------ */
#p-contact .pc-block {
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
/* Side headings (D86): real headings, 17 px 600 sans in ink, not mono captions. */
#p-contact .pc-block-title {
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
}
#p-contact .pc-dl { border-bottom: 1px solid var(--hairline); }
#p-contact .pc-dl .dl-value { font-size: 15px; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  #p-contact .pc-dl .dl-row { grid-template-columns: 96px minmax(0, 1fr); }
}
/* In the narrow 4-column side, a shorter label column leaves the email address room on one line. */
@media (min-width: 1100px) {
  #p-contact .pc-dl .dl-row { grid-template-columns: 72px minmax(0, 1fr); }
}
/* Standalone links in Contact details (email, LinkedIn) get a 40 px tap target on phones and tablets (D85). */
@media (max-width: 767px) {
  #p-contact .pc-dl a { display: inline-flex; align-items: center; min-height: 40px; }
}
#p-contact address { font-style: normal; line-height: 1.5; }