/* PK2 AI Advisors · the networking follow-up writer
   The page at /tools/connect/. Phone first: it is opened from a QR code, so
   the whole form sits above the fold on a phone and every tap target clears
   44px.

   Loads after tools.css and reuses its input, status, copy button, and output
   body styles. Adds no colour and no system size of its own: every value
   resolves through tokens.css, including the dark scheme this page opts into
   with html.scheme-auto. Flat by rule: no gradients, no shadows. Unlike the
   rest of the site, every box here takes the same rounded corner
   (--radius-field): the fields, the option tiles, the run button, the copy
   buttons, and the result cards. The site's pill buttons are squared off to
   match on this page only.
*/

/* ---------------------------------------------------------------- head -- */

.connect-section { padding-bottom: var(--space-6); }

.connect-sub {
  margin-top: var(--space-3);
  font-size: var(--size-body-lg);
  line-height: 1.5;
  color: var(--text);
}

/* ---------------------------------------------------------------- form -- */

.connect-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.connect-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* The question is the field's label, so it reads as a sentence in body type
   rather than a mono eyebrow. */
.connect-label {
  font-weight: 600;
  font-size: var(--size-body);
  line-height: 1.4;
  color: var(--ink);
}
.connect-label-small { font-size: var(--size-small); }

/* 16px or more on every input, so iOS does not zoom the page on focus.
   --size-body is 17px at its smallest. */
.connect-form .tool-input {
  font-size: var(--size-body);
  border-radius: var(--radius-field);
}
.connect-notes { min-height: calc(var(--btn-height) * 2.4); }

.connect-hint {
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- tiles -- */

.connect-types {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.connect-legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.connect-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

/* The radio sits inside the tile, invisible but still the real control, so
   arrow keys, screen readers, and the form all treat the three as a group. */
.connect-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: var(--space-2);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-field);
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--size-small);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-ui) ease, background var(--dur-ui) ease;
}
.connect-tile input {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.connect-tile:hover { border-color: var(--text-muted); }
.connect-tile:has(input:checked) {
  border: var(--strike) solid var(--gold);
  background: var(--gold-soft);
  font-weight: 700;
}
.connect-tile:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------- disclosure -- */

.connect-name summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--size-small);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
  cursor: pointer;
}
.connect-name[open] summary { margin-bottom: var(--space-2); }

/* ----------------------------------------------------------------- run -- */

.connect-run {
  width: 100%;
  justify-content: space-between;
  border-radius: var(--radius-field);
}
/* The arrow well sits inside the button, so it takes the corner less the
   inset rather than staying a circle in a rounded rectangle. */
.connect-run .btn-arrow { border-radius: calc(var(--radius-field) - 4px); }

.connect-form .tool-status { margin-top: calc(var(--space-2) * -1); }

/* ------------------------------------------------------------- output -- */

.connect-output {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.connect-output[hidden] { display: none; }

.connect-card {
  gap: var(--space-3);
  border-radius: var(--radius-field);
}

.connect-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--hair) solid var(--hairline);
}

/* The subject line with its own copy button beside it. */
.connect-subject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* The copy button grows to a full tap target on this page. */
.connect-copy {
  min-height: 44px;
  border-radius: var(--radius-field);
  min-width: 112px;
  flex: 0 0 auto;
  justify-content: center;
  font-size: var(--size-small);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------- footer -- */

.connect-cta {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--hair) solid var(--hairline);
  font-size: var(--size-body);
  line-height: 1.55;
  color: var(--text);
}
.connect-cta a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.connect-cta a:hover { color: var(--gold-text); }

.connect-note {
  margin-top: var(--space-4);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .connect-form { gap: var(--space-3); margin-top: var(--space-4); }
  .connect-sub { font-size: var(--size-body); }
}

/* "follow-up" breaks at its own hyphen in a narrow heading otherwise. */
.connect-nowrap { white-space: nowrap; }