/* Time Recovery Estimate. Loaded only on time-recovery-estimate.html. */
#tre [hidden], #tre[hidden] { display: none !important; }
.tre-step { border-top: 1px solid var(--teal-deep); padding-top: 26px; margin-bottom: 56px; }
.tre-step[hidden] { display: none; }
.tre-stepnum { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand); }
.tre-step h2 { color: var(--teal-deep); font-size: 34px; margin-top: 10px; }
.tre-step fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tre-step legend { padding: 0; }
.tre-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.tre-choice { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--rule); padding: 16px 16px; cursor: pointer; background: var(--paper); font-size: 18px; line-height: 1.4; color: var(--ink); }
.tre-choice:hover { border-color: var(--teal); }
.tre-choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.tre-choice:has(input:checked) { border-color: var(--teal); background: #EEF3EF; }
.tre-choice:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }
.tre-task { border: 1px solid var(--rule); padding: 18px; margin-top: 14px; background: var(--paper); }
.tre-task h3 { font-size: 21px; color: var(--teal-deep); }
.tre-task .tre-sys { font-size: 15px; color: var(--ink-mute); margin-top: 4px; }
.tre-task-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; margin-top: 14px; }
.tre-task-row .field { margin-bottom: 0; }
.tre-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.tre-rates .field { margin-bottom: 0; }
details.tre-adjust { margin-top: 22px; border: 1px solid var(--rule); padding: 14px 16px; }
details.tre-adjust summary { cursor: pointer; font-weight: 800; color: var(--teal); }
.tre-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.tre-error { color: #7A1F1F; font-weight: 700; margin-top: 14px; }
.tre-results { background: var(--cream); border: 1px solid var(--rule); padding: 26px; margin-top: 18px; }
.tre-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tre-big .n { font-family: "Instrument Serif", Georgia, serif; font-size: 44px; line-height: 1.05; color: var(--teal-deep); }
.tre-big .l { font-size: 16px; color: var(--ink-soft); margin-top: 6px; }
.tre-table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 16px; }
.tre-table th, .tre-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tre-table th { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.tre-table td.num, .tre-table th.num { text-align: right; white-space: nowrap; }
.tre-note { font-size: 16px; color: var(--ink-soft); margin-top: 16px; line-height: 1.55; }
.tre-flag { font-weight: 800; color: #7A1F1F; }
@media (max-width: 700px) {
  .tre-choices, .tre-task-row, .tre-big { grid-template-columns: minmax(0, 1fr); }
  .tre-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tre-step h2 { font-size: 28px; }
  .tre-big .n { font-size: 36px; }
  .tre-table { font-size: 15px; }
  .tre-table thead { display: none; }
  .tre-table, .tre-table tbody, .tre-table tr, .tre-table td { display: block; width: 100%; }
  .tre-table tr { border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .tre-table td { border: 0; padding: 3px 0; text-align: left; }
  .tre-table td.num { text-align: left; }
  .tre-table td.num:nth-child(2)::before { content: "Hours a week: "; color: var(--ink-mute); }
  .tre-table td.num:nth-child(3)::before { content: "Cost a year: "; color: var(--ink-mute); }
  .tre-table td:nth-child(4)::before { content: "What could help: "; color: var(--ink-mute); }
}
.tre-wide { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 16px; }
.tre-recs { list-style: decimal; padding-left: 22px; margin: 16px 0 0; }
.tre-recs li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tre-rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tre-rec-name { font-weight: 800; color: var(--teal-deep); font-size: 18px; }
.tre-tag { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--teal); padding: 2px 8px; }
.tre-rec-does { font-size: 16px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.tre-rec-for { font-size: 14px; color: var(--ink-mute); margin-top: 4px; }
.tre-final { border-left: 4px solid var(--teal-deep); background: var(--paper); padding: 16px 18px; margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.tre-final strong { color: var(--teal-deep); }
@media (max-width: 700px) { .tre-table td:nth-child(4)::before { content: "Recommended build: "; } }

/* software choices */
.tre-tools { margin-top: 16px; }
.tre-tools .tre-choice { font-size: 16px; padding: 12px 14px; }

/* print: the estimate only */
@media print {
  header, nav, footer, .tre-actions, #tre-step1, #tre-step2, #tre-step3, #tre-form, #tre-sent, #tre-mail, .glow, .guides { display: none !important; }
  body { background: #fff; }
  #tre-step4 { border: 0; margin: 0; padding: 0; }
  .tre-results { border: 1px solid #DCD6CA; background: #fff; padding: 16px; }
  .tre-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tre-recs li, .tre-table tr { break-inside: avoid; }
  a[href]:after { content: ""; }
  /* hero prints dark teal on white: browsers drop the teal background when printing */
  .page-hero { background: #FFFFFF !important; padding: 0 0 18px !important; }
  .page-hero h1, .page-hero h1 em, .page-hero p, .page-hero p span, .page-hero .lab { color: var(--teal-deep) !important; opacity: 1 !important; }
  .page-hero span[style*="height:1px"] { display: none !important; }
  .sec { padding-top: 12px !important; }
  .page-hero h1 { font-size: 40px !important; margin-top: 14px !important; }
  .page-hero .grid > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* print button: solid dark teal */
#tre-print { background: var(--teal-deep); color: #FFFFFF; border-color: var(--teal-deep); }
#tre-print:hover { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }