/* ==========================================================================
   Lecture — lecture.drfigo.com
   Beige ground, maroon-dominant type and accents. The surface ratio comes from
   .site-lecture in tokens.css and everything shared lives in base.css; this
   file holds only what is particular to this site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The connection graph
   -------------------------------------------------------------------------- */

.graph-section { padding-block-end: var(--sp-8); }

.graph-figure {
  max-inline-size: 440px;
  margin-inline: auto;
}

/* Label bar — a hard direction lock, not a [dir] override.
   The two labels sit above two fixed columns of an SVG whose coordinates never
   mirror. In normal flow the labels swap sides under RTL and end up over the
   wrong group, which is a bug this page has had before. Forcing LTR and
   positioning each label at its own column percentage makes the pairing
   independent of page direction. */
.graph-labels {
  direction: ltr;
  position: relative;
  block-size: 1.9em;
  margin-block-end: var(--sp-2);
}

.graph-labels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand);
  white-space: nowrap;
}

/* Anchored to the SVG's own column centres: 48/340 and 288/340 of the viewBox. */
.graph-labels .is-students { left: 14.1%; }
.graph-labels .is-tutors   { left: 84.7%; }

.graph { display: block; inline-size: 100%; block-size: auto; }

.g-link { fill: none; stroke: var(--brand); stroke-width: 1.4; opacity: .5; }

.g-node > circle { vector-effect: non-scaling-stroke; }

.g-student > circle { fill: var(--ground); stroke: var(--brand); stroke-width: 1.4; }

.g-student .g-glyph {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.g-tutor > circle { fill: var(--brand); }
.g-tutor .g-glyph { fill: var(--on-brand); }

.graph-note {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
  text-align: start;
}

/* Connector draw-in, staggered per tutor. Scoped to .js like every reveal. */
.js .graph .g-link {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}

.js .graph.is-in .g-link {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms var(--ease-out);
  transition-delay: var(--draw-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .graph .g-link { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Request block — the only interaction on the page
   -------------------------------------------------------------------------- */

.request {
  background: var(--surface);
  padding: var(--sp-6) var(--gutter);
  margin-block-start: var(--sp-6);
}

.request__fields { display: grid; gap: var(--sp-6); }

.request__send { margin-block-start: var(--sp-6); }
.request__send .btn { inline-size: 100%; }

.request__hint {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}

/* The specialty strip bleeds to the panel edge so the part-visible last pill
   reads as "there is more here" rather than as a clipped mistake. */
.request .pills {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

@media (min-width: 700px) {
  .request { padding: var(--sp-7); }
  .request .pills {
    margin-inline: 0;
    padding-inline: 0;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .request__send .btn { inline-size: auto; }
  .graph-figure { max-inline-size: 520px; }
}