/* Guardian Smith partner portal
 *
 * Direction: design/design-brief.md. Read it before changing a value here.
 * Stance: this is a custody record, not a lead form. The handover rail is the
 * signature move; the form is a 60-second on-ramp to it.
 *
 * The palette, the coloured shadows, the glow ring and the gradients are read from
 * guardiansmith.co.nz's own stylesheet — they are observations of their brand, not
 * preferences of ours.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Guardian Smith greens, from their live CSS. */
  --gs-green:        #0d8748;
  --gs-green-dark:   #007038;
  --gs-green-deep:   #005328;
  --gs-green-bright: #00a651;
  --gs-green-mid:    #196740;
  --gs-green-tint:   #f0f9f4;

  --ink:        #191919;
  --ink-soft:   #414141;
  --ink-mute:   #6b6b68;
  --line:       #e8e8e8;
  --line-soft:  #f0f0ef;
  --paper:      #f4f3f3;
  --surface:    #ffffff;
  --surface-sunk: #fafaf9;

  /* Outcomes. Deliberately NOT a red/amber/green traffic light — the brief breaks
   * that. Won is the brand green; not-proceeding is a warm grey-clay that reads as
   * "closed", not as "error". Nobody failed when a client decides not to proceed. */
  --won:        #007038;
  --closed:     #8a8078;
  --closed-bg:  #f5f3f1;
  --attention:  #b4541f;

  /* Elevation is GREEN, not grey — their shadows are coloured (0 2px 6px #0087484d).
   * Three layers, because their brand has a real ramp. */
  --shadow-1: 0 1px 2px rgba(0,83,40,.06), 0 2px 6px rgba(0,135,72,.10);
  --shadow-2: 0 2px 4px rgba(25,25,25,.04), 0 8px 24px rgba(0,83,40,.10);
  --shadow-3: 0 2px 4px rgba(25,25,25,.04), 0 8px 24px rgba(25,25,25,.08), 0 20px 60px rgba(0,83,40,.14);
  --shadow-ring:   0 0 0 5px rgba(0,166,81,.15), 0 0 12px 4px rgba(0,166,81,.22);
  --shadow-ring-focus: 0 0 0 3px rgba(0,166,81,.35), 0 0 0 5px rgba(255,255,255,.9);

  /* Radii by role. Square for structure, pill for state, soft for surfaces —
   * the brand uses 0, 4px, .5rem and 9999px together. */
  --radius-sharp: 0;
  --radius-tight: 4px;
  --radius-soft:  10px;
  --radius-card:  14px;
  --radius-pill:  9999px;

  /* Type. Display-to-body contrast is ~4:1, not 1.8:1. */
  --font-display: "Chakra Petch", "Arial Narrow", Helvetica, sans-serif;
  --font-body: Helvetica, Arial, "Helvetica Neue", sans-serif;
  --font-num: ui-monospace, "SF Mono", Menlo, monospace;

  --t-display: clamp(2.6rem, 6.5vw, 4.25rem);
  --t-h1: clamp(1.6rem, 3.2vw, 2.1rem);
  --t-h2: 1.25rem;
  --t-body: 0.9375rem;   /* 15px */
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  /* Motion by ROLE, not one duration. Four durations, three curves. */
  --dur-micro: 150ms;
  --dur-state: 260ms;
  --dur-enter: 420ms;
  --dur-ambient: 2400ms;
  --ease-micro: cubic-bezier(.2, 0, 0, 1);
  --ease-settle: cubic-bezier(.32, .72, 0, 1);
  --ease-over: cubic-bezier(.16, 1, .3, 1);

  --measure: 34rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  /* The paper is not a flat fill: a barely-there green wash from the top-left, so
   * the page has a light source. Texture, spent once, cheaply. */
  background-image:
    radial-gradient(1200px 600px at 0% -10%, rgba(0,166,81,.07), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, .display, .eyebrow, .rung-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* Their typographic signature: uppercase, wide tracking, small. */
.eyebrow {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 700;
  color: var(--gs-green-dark);
}
.eyebrow--quiet { color: var(--ink-mute); }

a { color: var(--gs-green-dark); text-underline-offset: 2px; }
a:hover { color: var(--gs-green-bright); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring-focus);
  border-radius: var(--radius-tight);
}

/* ------------------------------------------------------------------ chrome */
.masthead {
  background: var(--ink);
  background-image: linear-gradient(160deg, #4b4b4b, #191919);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
}
.masthead__bar {
  max-width: 76rem; margin: 0 auto;
  padding: .75rem var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.brandmark {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .02em; color: #fff; text-decoration: none;
}
.brandmark__dot {
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: var(--gs-green-bright);
  box-shadow: 0 0 0 4px rgba(0,166,81,.22);
}
.masthead__spacer { flex: 1; }

.nav { display: flex; gap: .25rem; align-items: center; }
.nav a {
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: var(--t-small); padding: .45rem .7rem; border-radius: var(--radius-tight);
  transition: background var(--dur-micro) var(--ease-micro),
              color var(--dur-micro) var(--ease-micro);
}
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav a[aria-current="page"] {
  color: #fff; background: rgba(0,166,81,.22);
  box-shadow: inset 0 -2px 0 var(--gs-green-bright);
}

/* Hamburger: CSS-only, no JS. Mobile is a menu, never a wrapping row. */
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* ------------------------------------------------------------------ layout */
.wrap { max-width: 76rem; margin: 0 auto; padding: var(--gutter); }
.wrap--narrow { max-width: 46rem; }

.pagehead { margin-bottom: 1.75rem; }
.pagehead h1 { font-size: var(--t-h1); margin-top: .3rem; }
.pagehead p { color: var(--ink-soft); margin: .5rem 0 0; max-width: var(--measure); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: 1.25rem;
}

/* --------------------------------------------------- THE HANDOVER RAIL
 * The signature move. A custody chain, not a status. Two densities: full on the
 * referral detail, compressed on a board card. One idea, used twice.  */
.rail { list-style: none; margin: 0; padding: 0; position: relative; }
.rail__node {
  position: relative;
  padding: 0 0 1.35rem 2.25rem;
  /* Nodes stagger in — entrance choreography, not a fade. */
  animation: rail-in var(--dur-enter) var(--ease-over) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.rail__node::before {           /* the spine */
  content: ""; position: absolute; left: 7px; top: 1.15rem; bottom: -.15rem;
  width: 2px; background: var(--line);
}
.rail__node:last-child::before { display: none; }
.rail__node::after {            /* the bead */
  content: ""; position: absolute; left: 0; top: .35rem;
  width: 16px; height: 16px; border-radius: var(--radius-pill);
  background: var(--surface); border: 2px solid var(--line);
  transition: box-shadow var(--dur-state) var(--ease-settle),
              border-color var(--dur-state) var(--ease-settle);
}
.rail__node--done::after { border-color: var(--gs-green); background: var(--gs-green); }
.rail__node--done::before { background: linear-gradient(180deg, var(--gs-green), var(--gs-green-mid)); }

/* Where the client is RIGHT NOW. The one piece of ambient motion in the product. */
.rail__node--now::after {
  border-color: var(--gs-green-bright); background: var(--surface);
  animation: pulse var(--dur-ambient) var(--ease-micro) infinite;
}
.rail__node--future { opacity: .45; }
.rail__node--future::after { border-style: dashed; }
.rail__node--closed::after { border-color: var(--closed); background: var(--closed); }

.rail__when {
  font-family: var(--font-num); font-size: var(--t-micro);
  color: var(--ink-mute); letter-spacing: .02em;
}
.rung-name { font-size: 1.0625rem; margin: .1rem 0 .15rem; }
/* The REAL GHL stage, beside the rung — never replaced by it (spec D13). */
.rail__real {
  font-size: var(--t-small); color: var(--ink-soft);
}
.rail__real b { font-weight: 400; color: var(--ink); }
/* Dwell time: the thing no competitor portal shows. */
.dwell {
  display: inline-block; margin-left: .5rem;
  font-family: var(--font-num); font-size: var(--t-micro);
  padding: .1rem .45rem; border-radius: var(--radius-pill);
  background: var(--gs-green-tint); color: var(--gs-green-deep);
}
.dwell--long { background: #fdf1e7; color: var(--attention); }

@keyframes rail-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,166,81,.30), 0 0 0 0 rgba(0,166,81,0); }
  50%      { box-shadow: var(--shadow-ring); }
}

/* ------------------------------------------- referral header (the texture) */
.referral-head {
  border-radius: var(--radius-card);
  padding: 1.75rem var(--gutter);
  color: #fff;
  background: linear-gradient(160deg, var(--gs-green-deep), var(--gs-green));
  box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
}
.referral-head::after {   /* fine grain — the one textured surface */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.55) .5px, transparent .5px);
  background-size: 4px 4px;
}
.referral-head h1 { font-size: var(--t-display); letter-spacing: -0.02em; }
.referral-head .meta { color: rgba(255,255,255,.85); font-size: var(--t-small); margin-top: .4rem; }
.referral-head .ref-no {
  font-family: var(--font-num); font-size: var(--t-small);
  background: rgba(255,255,255,.16); padding: .2rem .55rem; border-radius: var(--radius-tight);
}

/* ------------------------------------------------------- board + the cards */
.board { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

.rcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-state) var(--ease-settle),
              box-shadow var(--dur-state) var(--ease-settle),
              border-color var(--dur-micro) var(--ease-micro);
}
.rcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: rgba(0,166,81,.35); }
.rcard__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.rcard__sub { font-size: var(--t-small); color: var(--ink-mute); }

/* The compressed rail — same idea as the detail, four beads instead of seven. */
.minirail { display: flex; align-items: center; gap: 4px; margin: .8rem 0 .5rem; }
.minirail i {
  height: 4px; flex: 1; border-radius: var(--radius-pill); background: var(--line);
  transition: background var(--dur-state) var(--ease-settle);
}
.minirail i.on { background: var(--gs-green); }
.minirail i.now { background: var(--gs-green-bright); box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.minirail i.closed { background: var(--closed); }

.stage-line { font-size: var(--t-small); }
.stage-line b { font-family: var(--font-display); font-weight: 600; }
.stage-line span { color: var(--ink-mute); }

/* ------------------------------------------------------------- list (tight)
 * Deliberately a different rhythm from the board: dense, tabular, many at once. */
.rows { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.rows th {
  text-align: left; font-family: var(--font-display); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute);
  padding: .5rem .6rem; border-bottom: 1px solid var(--line);
}
.rows td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); }
.rows tbody tr { transition: background var(--dur-micro) var(--ease-micro); }
.rows tbody tr:hover { background: var(--gs-green-tint); }
.rows .num { font-family: var(--font-num); color: var(--ink-mute); }

/* ------------------------------------------------------------------- forms */
.field { margin-bottom: 1.1rem; }
.field > label { display: block; font-weight: 700; font-size: var(--t-small); margin-bottom: .3rem; }
.field .hint { color: var(--ink-mute); font-size: var(--t-small); margin: .15rem 0 .4rem; }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=password], select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: .6rem .7rem;
  border: 1px solid #d8d8d6; border-radius: var(--radius-soft);
  background: var(--surface);
  transition: border-color var(--dur-micro) var(--ease-micro),
              box-shadow var(--dur-micro) var(--ease-micro);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gs-green-bright); box-shadow: var(--shadow-ring); outline: none;
}
textarea { min-height: 5.5rem; resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .08em;
  padding: .7rem 1.3rem; border: 0; border-radius: var(--radius-soft);
  background: linear-gradient(135deg, var(--gs-green-mid), var(--gs-green-bright));
  color: #fff; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,135,72,.30);
  transition: transform var(--dur-micro) var(--ease-micro),
              box-shadow var(--dur-state) var(--ease-settle),
              filter var(--dur-micro) var(--ease-micro);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,135,72,.36); filter: saturate(1.1); }
.btn:active { transform: translateY(0); }
.btn--quiet {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: none;
}
.btn--quiet:hover { background: var(--gs-green-tint); border-color: var(--gs-green); filter: none; }

.notice {
  border-left: 3px solid var(--gs-green); background: var(--gs-green-tint);
  padding: .8rem 1rem; border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
  font-size: var(--t-small);
}
.notice--bad { border-left-color: var(--attention); background: #fdf1e7; }

.consent {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--radius-soft); padding: .9rem 1rem;
}
.consent input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--gs-green); }
.consent label { font-size: var(--t-small); color: var(--ink-soft); }

/* ------------------------------------------------------------------ footer */
.footer {
  border-top: 1px solid var(--line); margin-top: 3rem;
  padding: 1.5rem var(--gutter); color: var(--ink-mute); font-size: var(--t-small);
}
.footer .cobrand { color: var(--ink-soft); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 860px) {
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 38px; border-radius: var(--radius-tight);
    background: rgba(255,255,255,.08); cursor: pointer;
  }
  .nav-burger span {
    display: block; width: 20px; height: 2px; background: #fff; position: relative;
    transition: transform var(--dur-state) var(--ease-settle),
                background var(--dur-micro) var(--ease-micro);
  }
  .nav-burger span::before, .nav-burger span::after {
    content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff;
    transition: transform var(--dur-state) var(--ease-settle), top var(--dur-state) var(--ease-settle);
  }
  .nav-burger span::before { top: -6px; }
  .nav-burger span::after  { top: 6px; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #191919; border-top: 1px solid rgba(255,255,255,.1);
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur-state) var(--ease-settle);
  }
  .nav a { padding: .9rem var(--gutter); border-bottom: 1px solid rgba(255,255,255,.07); }

  .nav-toggle:checked ~ .nav { max-height: 22rem; }
  .nav-toggle:checked ~ .nav-burger span { background: transparent; }
  .nav-toggle:checked ~ .nav-burger span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span::after  { top: 0; transform: rotate(-45deg); }

  .masthead__bar { position: relative; }
  .board { grid-template-columns: 1fr; }
  .referral-head h1 { font-size: 2rem; }
}

/* Reduced motion: remove the ambient pulse and the entrances, keep the state
 * changes short. A correctness bug if omitted, not a nicety. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}