/* PK2 AI Advisors · tools
   The tools index and the tool page pattern: the input form, the output
   drafts, the copy buttons, the timing line.

   Loads after site.css and week-grid.css. It adds no colour and no system
   size of its own: every value resolves through a custom property from
   tokens.css, and the card frame comes from .grid-card in week-grid.css.
   The three output drafts are grid-cards too, so a draft is ruled the same
   way a tool card is.

   Flat by rule: no gradients, no shadows, no radius except the button pill.
*/

/* ------------------------------------------------------------- the index -- */

/* One tool today. The card takes half the row on a wide screen and the other
   half stays empty paper, which reads as restraint. A second tool fills it
   without a rule change here. */
.tool-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.tool-more {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--hair) solid var(--hairline);
}

/* ---------------------------------------------------------- the tool page -- */

/* The tool runs in a column narrower than the full container. A form that
   spans 1200px reads as a database, not as a thing you fill in. */
.tool-column {
  max-width: calc(var(--measure) + var(--space-7) * 2);
}

/* What the tool does with the five fields. It sits under the run row, so it is
   set at small muted size with the mono label above it: a footnote to the form
   rather than something competing with the heading. */
.tool-note {
  margin-top: var(--space-6);
}
.tool-note .label { margin-bottom: var(--space-2); }
.tool-note .small { margin-top: var(--space-2); color: var(--text-muted); }

.tool-form {
  margin-top: var(--space-6);
}

.tool-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.tool-field-wide { grid-column: 1 / -1; }

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

.tool-label {
  display: flex;
  align-items: baseline;
  gap: 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);
}

/* The optional field says so on the label, not in a footnote. */
.tool-optional {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--gold-text);
}

/* Inputs are ruled, not boxed: a hairline all round, no fill, no radius, in
   the same weight as the week grid. */
.tool-input {
  width: 100%;
  min-height: var(--btn-height);
  padding: var(--space-2) var(--space-3);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
  transition: border-color var(--dur-ui) ease;
}
.tool-input:hover { border-color: var(--text-muted); }
.tool-input:focus { border-color: var(--ink); }
.tool-input::placeholder { color: var(--text-muted); }

.tool-textarea {
  min-height: calc(var(--btn-height) * 2);
  resize: vertical;
}

.tool-hint { margin-top: var(--space-1); }

.tool-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* While the request is out the button says so and stops taking presses. */
.btn-primary[disabled] {
  opacity: 0.55;
  cursor: default;
}
.btn-primary[disabled]:hover { background: var(--gold); }
.btn-primary[disabled]:hover .btn-arrow { transform: none; }
.btn-primary[disabled]:active { transform: none; }

/* The status line. Empty and invisible until it has something to say, so the
   layout does not carry a reserved gap for a message that rarely appears. */
.tool-status {
  margin-top: var(--space-3);
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--ink);
}
.tool-status:empty { display: none; }

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

.tool-output {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
/* Before a run there are no drafts, and the note below has to read as sitting
   directly under the run row. The display above would otherwise beat the
   browser's own rule for the hidden attribute and leave an empty grid holding
   its own top margin, which doubles the gap. */
.tool-output[hidden] { display: none; }

.tool-email { gap: var(--space-3); }

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

.tool-email-subject {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-h4);
  line-height: 1.4;
  color: var(--ink);
}

/* The draft itself. Line breaks come from the model as text, so they are
   honoured here rather than rebuilt as markup. */
.tool-email-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* The copy button. Mono pill, hairline, one size down from a secondary
   button, because it sits inside a card rather than under one. */
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.btn-copy:hover { border-color: var(--ink); }
.btn-copy.is-copied {
  border-color: var(--gold);
  color: var(--gold-text);
}

/* The measured number, printed as it was measured. Mono, quiet, and it only
   exists once a run has actually happened. */
.tool-timing {
  margin-top: var(--space-4);
  color: var(--text-muted);
}

/* ----------------------------------------------------------------- turn -- */

.tool-cta { margin-top: var(--space-5); }
.tool-cta-note { margin-top: var(--space-3); }

/* --------------------------------------------------------------- narrow -- */

@media (max-width: 640px) {
  .tool-list { grid-template-columns: 1fr; }
  .tool-fields { grid-template-columns: 1fr; gap: var(--space-3); }
  .tool-field-wide { grid-column: 1; }
  .tool-run > .btn-primary { width: 100%; justify-content: space-between; }
  .tool-run > .btn-secondary { width: 100%; justify-content: center; }
  .tool-email-head { align-items: flex-start; }
}