/* ═══════════════════════════════════════════════════════════════════════════
   Rotaract Club of Hong Kong Island East · pages/contact.css
   The Contact page on the bright site (src/pages/contact.html). Everything is scoped to .page--contact and
   built from the bright vocabulary of bright.css. Colours are tokens and tones only, never a value: the
   palette is "Sand and wine" (the tokens keep their first names: --blush is sand, --cream paper, --magenta
   aubergine, --apricot amber). No pink ground or panel; cranberry is the accent, never a large field.
   Nothing here moves by itself: the engine's attributes and wheel.js do that, and contact.js fills one ring.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────── 1 the head, the form and its wheel ──
   Sand (the ground named blush). The title and its lead, and straight under them the white panel, so that
   the first screen of a short window already holds the heading, the first fields and the wheel. */
.page--contact .contact-top { padding-block-start: calc(var(--clear-top, var(--bar-top)) + clamp(1.5rem, 4.5vh, 4.5rem)); overflow: clip; }
.page--contact .contact-top__inner { position: relative; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.page--contact .contact-top__head { display: grid; gap: clamp(.75rem, .6rem + .8vw, 1.25rem); justify-items: start; min-inline-size: 0; }
.page--contact .contact-top__head > .lead { max-inline-size: 30em; }
/* The logo's wheel at the end side of the head, most of it out of frame; the scroll turns it. */
.page--contact .contact-top__wheel { --d: clamp(13rem, 6rem + 24vw, 26rem); position: absolute; inset-block-start: calc(var(--bar-top) - var(--d) * .2); inset-inline-end: calc(var(--d) * -.3); display: block; inline-size: var(--d); block-size: var(--d); color: var(--wheel-colour); pointer-events: none; }
.page--contact .contact-top__wheel > span { display: block; inline-size: 100%; block-size: 100%; }
.page--contact .contact-top__wheel .wheel { inline-size: 100%; block-size: 100%; }
@media (max-width: 43.99rem) {
  .page--contact .contact-top__wheel { display: none; }             /* a phone's head is the title and nothing else */
}

/* The panel: the heading, the form, its wheel, and what is true of the form.
     a phone (under 34rem)   the heading, the form with a small floating meter over its end side, then the note
     a pane (34 to 64rem)    the wheel in a lane of its own beside the fields; the note follows the form, at
                             its full measure (beside the wheel it stood in a column twenty letters wide)
     wide (from 64rem)       the form keeps its own measure; the rest of the panel is the wheel's stage, with
                             the note under it, and both stay in view while the fields go by */
.page--contact .contact-form__panel {
  --meter: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 0;
  padding: clamp(1.25rem, .75rem + 2.6vw, 3.5rem);
}
.page--contact .contact-form__head { grid-area: 1 / 1; margin-block-end: var(--space-m); }
.page--contact .contact-form__title { font-size: calc(clamp(1.625rem, 1.4rem + 1vw, 2.25rem) * var(--display-scale)); }
.page--contact .contact-form__fields { grid-area: 2 / 1; min-inline-size: 0; }   /* every part names its cell: the meter is laid over this one, and an unnamed part would step aside into a cell of its own */
.page--contact .contact-form__fields .field__label { text-wrap: balance; }
.page--contact .contact-form__fields .form__preview { text-wrap: balance; }                                   /* the form's own note that nothing is sent: two even lines, never two words alone */

/* The meter on a phone: a small white disc that floats at the form's end side. It starts beside the first label,
   keeps under the header while the fields go by beneath it (the top of the screen is the part an on-screen
   keyboard never covers), and leaves with the foot of the panel. So the wheel is never out of sight. The ring
   round it fills with each completed field (contact.js); the wheel inside gains its teeth, lights when all are
   done and turns when the form is sent. It is laid over the form's own cell and never takes a tap. */
.page--contact .contact-form__side { display: contents; }
.page--contact .contact-form__meter {
  grid-area: 2 / 1;
  justify-self: end;
  align-self: start;
  position: sticky;
  inset-block-start: calc(var(--bar-top) + .625rem);
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: var(--meter);
  block-size: var(--meter);
  margin-block-start: -.75rem;                        /* beside the first label, not over the first field */
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-float);
  pointer-events: none;
}
.page--contact .contact-form__meter > * { grid-area: 1 / 1; }
.page--contact .contact-form__ring { --ring-size: var(--meter); }
.page--contact .contact-form__meter .wheel-form { --wheel-size: calc(var(--meter) * .62); inline-size: calc(var(--meter) * .62); }

.page--contact .contact-form__notes { grid-area: 3 / 1; display: grid; gap: .75rem; margin-block-start: var(--space-l); }
.page--contact .contact-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .625rem; max-inline-size: 34em; color: var(--fg-muted); font-size: 1rem; line-height: 1.5; }
.page--contact .contact-note > .icon { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .125rem; color: var(--cranberry-lit); }
/* The channels, once the club has any: each a pill with its sign on a hub. */
.page--contact .contact-channels { display: grid; gap: var(--space-xs); justify-items: start; }
.page--contact .contact-channels__title { font-size: var(--fs-sub); font-weight: var(--fw-title); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
.page--contact .contact-channels__list { display: grid; gap: .5rem; justify-items: start; }
.page--contact .contact-channels__link { min-block-size: 3rem; overflow-wrap: anywhere; }

@media (max-width: 33.99rem) {
  /* The meter's lane. Whatever is read or chosen (labels, hints, chips, the tick and its sentence, what the form
     says back, the note) keeps clear of the meter's side, so the meter never lies on a word or on the end of a
     chip. The fields themselves run the whole width and pass under it as they go by. */
  .page--contact .contact-form__fields :is(.field__label, .field__hint, .field__error, .chips, .check, .form__pics, .form__preview, .form__note, .form__noscript, .form__status),
  .page--contact .contact-form__notes { padding-inline-end: calc(var(--meter) + .5rem); }
  /* A field that takes the focus comes to rest below the meter, not under it. */
  .page--contact .contact-form__fields :is(.field__input, .chip > input, .check__input) { scroll-margin-block-start: calc(var(--meter) + 2.5rem); }
}

/* A pane: the wheel stands in a lane of its own beside the fields and keeps under the header while they go by.
   Nothing is laid over anything. */
@media (min-width: 34rem) and (max-width: 63.99rem) {
  .page--contact .contact-form__panel {
    --meter: clamp(5.5rem, 14vw, 8rem);
    grid-template-columns: minmax(0, 1fr) var(--meter);
    column-gap: clamp(1rem, 4vw, 2.5rem);
  }
  .page--contact .contact-form__head { grid-area: 1 / 1 / auto / -1; }
  .page--contact .contact-form__meter { grid-area: 2 / 2; justify-self: center; inset-block-start: calc(var(--bar-top) + 1.25rem); margin-block-start: .375rem; box-shadow: none; }
  .page--contact .contact-form__meter .wheel-form { --wheel-size: calc(var(--meter) * .76); inline-size: calc(var(--meter) * .76); }
}

@media (min-width: 64rem) {
  /* A wide screen: the form keeps its own measure and the rest of the panel is the wheel's stage. */
  .page--contact .contact-form__panel {
    --meter: clamp(8.5rem, 4.5rem + 9vw, 12rem);
    grid-template-columns: minmax(0, 38rem) minmax(15rem, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, .5rem + 3.6vw, 4.5rem);
  }
  .page--contact .contact-form__side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--bar-top) + 1.25rem);
    display: grid;
    gap: var(--space-m);
    justify-items: center;
  }
  .page--contact .contact-form__meter,
  .page--contact .contact-form__notes { grid-area: auto; margin-block-start: 0; }
  .page--contact .contact-form__meter { position: relative; inset-block-start: auto; justify-self: center; align-self: auto; box-shadow: none; pointer-events: auto; }
  .page--contact .contact-form__meter .wheel-form { --wheel-size: calc(var(--meter) * .76); inline-size: calc(var(--meter) * .76); }
  .page--contact .contact-form__notes { inline-size: min(100%, 19rem); }
}

/* ───────────────────────────────────────────────── 2 who is writing ──
   White. Two panels, wine and sand, each with its sign on a hub and a button that chooses its subject in
   the form. */
.page--contact .contact-who__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.page--contact .contact-who__card { display: grid; gap: .75rem; align-content: start; justify-items: start; padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); }
.page--contact .contact-who__card > .btn { margin-block-start: var(--space-2xs); }
.page--contact .contact-who__card .btn .icon { inline-size: 1.25rem; block-size: 1.25rem; }
@media (min-width: 44rem) {
  .page--contact .contact-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--contact .contact-who__card { grid-template-rows: auto auto 1fr auto; }      /* the two buttons on one line */
}

/* ───────────────────────────────────────────────── 3 three small doors ──
   Paper (the ground named cream); the doors aubergine, plum and amber. On a phone: three rows, the sign at
   the start side. From 44rem: three upright panels (and from 56rem bright.css widens the one under the
   pointer). */
.page--contact .contact-door { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .375rem; align-items: start; padding: clamp(1.125rem, .9rem + 1.2vw, 1.75rem); }
.page--contact .contact-door > .b-medallion { grid-row: 1 / span 3; }
.page--contact .contact-door__title { align-self: center; font-size: calc(clamp(1.5rem, 1.35rem + .7vw, 1.875rem) * var(--display-scale)); }
.page--contact .contact-door__text { line-height: 1.5; }
.page--contact .contact-door__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: .5rem; }
.page--contact .contact-door__go { font-weight: var(--fw-strong); line-height: var(--lh-ui); }
/* A door's ring is drawn outside the door, on the section's paper: so it is the ring of that ground, not of
   the door's own tone (which made it white round the two deep doors, where nobody could see it). */
.page--contact .contact-door:focus-visible { outline-color: var(--cranberry-text); }
.page--contact .contact-door > :not(.b-medallion) { grid-column: 2; }
@media (min-width: 44rem) {
  .page--contact .contact-doors .b-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* three upright doors already in a narrow pane */
  .page--contact .contact-door { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; row-gap: .75rem; min-block-size: 16rem; }
  .page--contact .contact-door > .b-medallion { grid-row: auto; margin-block-end: .5rem; }
  .page--contact .contact-door > :not(.b-medallion) { grid-column: auto; }
  .page--contact .contact-door__foot { align-self: end; }
}

/* Where "Write to us" lands: the engine moves the focus to the form itself (not a control, so it is out of the
   tab order). A soft ring round it says where you are without shouting. */
.page--contact .form[tabindex="-1"]:focus-visible { outline: 2px solid var(--rule); outline-offset: .625rem; border-radius: var(--r-field); }