/* ============================================================
   Product Guarantee Calculator — additions to styles.css
   Loaded after assets/styles.css, which supplies the tokens, the shared
   components (cards, fields, goal picker, hero, lines, print recap) and
   the print stylesheet. Only what is new to this tool lives here.
   ============================================================ */

/* The guarantee cap is an add-back against the raw loss, not a cost —
   colour it as the credit it is, so it does not read like another deduction. */
.line-floor dd { color: var(--green); }

/* A subhead that opens a card has no preceding block to rule off from. */
.subhead-first { margin-top: 14px; padding-top: 0; border-top: none; }

/* A note that sets up the fields below it, rather than qualifying them. */
.card-note-top { margin-top: 10px; }

/* ============================================================
   How the target was set
   The method is the argument here, so the derivation gets its own block
   rather than hiding inside the line items.
   ============================================================ */
.target-work {
  margin-top: 16px; padding: 13px 15px;
  background: var(--cream); border: 1px solid var(--cream-deep); border-radius: 8px;
}
.tw-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--navy-50); margin: 0 0 9px;
}
.tw-pair { display: flex; gap: 12px; align-items: stretch; }
.tw-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--cream-deep);
  border-radius: 6px; padding: 10px 12px 11px;
}
.tw-head {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: var(--tr-mono);
  text-transform: uppercase; color: var(--navy); margin: 0 0 7px;
  padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.tw-head span { color: var(--navy-50); }

.tw-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 3px 0;
}
.tw-k { font-size: 13px; color: var(--navy-50); }
.tw-v {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The two takeaway rows — the season adjustment and the bushels credited.
   `margin-top: auto` floats them to the bottom so they line up across the
   two columns even though the control side has one row fewer. */
.tw-key {
  margin-top: auto; padding-top: 7px;
  border-top: 1px solid var(--rule);
}
.tw-key .tw-k { color: var(--navy-80); }
.tw-key .tw-v {
  font-family: var(--display); font-size: 19px; font-weight: 500;
  letter-spacing: var(--tr-display);
}
.tw-v.pos { color: var(--green); }
.tw-v.neg { color: var(--orange); }

/* the target itself is the number everything else is measured against */
.tw-row.tw-target .tw-k, .tw-row.tw-target .tw-v { color: var(--navy); }
.tw-row.tw-target { background: var(--cream); margin: 2px -6px; padding: 3px 6px; border-radius: 4px; }

@media (max-width: 400px) {
  .tw-pair { flex-direction: column; }
  .tw-key { margin-top: 7px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .target-work { margin-top: 7pt; padding: 6pt 8pt; break-inside: avoid; }
  .tw-label { font-size: 6.5pt; margin-bottom: 5pt; }
  .tw-pair { gap: 7pt; }
  .tw-col { padding: 5pt 7pt 6pt; }
  .tw-head { font-size: 6.5pt; margin-bottom: 4pt; padding-bottom: 3pt; }
  .tw-row { padding: 1.5pt 0; }
  .tw-k { font-size: 7.5pt; }
  .tw-v { font-size: 8pt; }
  .tw-key { padding-top: 4pt; }
  .tw-key .tw-v { font-size: 11pt; }
  .tw-row.tw-target { margin: 1pt -4pt; padding: 1.5pt 4pt; }
}