/* (c) 2026 Zero Mile Contract Limited. All rights reserved. */
/* /download-time/ only. Shared pieces (.intro, .rules-line, .sheet, .sheet-h, .field, .chips, .btn, .spec, tables,
   .sr, focus ring) come from site.css. Narrow first; inputs and result side by side from 821px, like the rest of
   the site. */

/* The calculator: inputs on the left, the result on the right */
/* Narrow: the result first, so the answer is on the first screen; then the inputs; then the link. The page's
   order (inputs, result, link) is the order of focus and of reading. */
.dl-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "out" "in" "link"; }
.dl-in { grid-area: in; } .dl-out { grid-area: out; } .dl-link { grid-area: link; }
.pg-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.dl-in, .pg-in { min-width: 0; display: grid; gap: 16px; align-content: start; padding: 14px 14px 16px; }
.dl-out, .pg-out { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; }
.dl-out { border-bottom: 1px solid var(--ink); }
.pg-out { border-top: 1px solid var(--ink); }
.dl-link { min-width: 0; display: grid; gap: 8px; padding: 0 14px 16px; }

.lab { display: block; margin: 0 0 6px; font: 500 13px var(--mono); color: var(--mute); }
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.find .lab { margin: 0; }
.find .chips button { min-height: 36px; padding: 6px 14px; font-size: 14px; }

.row { min-width: 0; }
.pair { display: flex; align-items: stretch; min-width: 0; }
.pair .field { flex: 1 1 auto; width: 0; min-width: 0; min-height: 48px; }
.pair .unit { flex: none; max-width: 52%; min-height: 48px; padding: 0 8px; border: 1px solid var(--field); border-left: 0; border-radius: 0; background: var(--sheet); color: var(--ink); font: 500 15px var(--mono); cursor: pointer; }
.pair .unit-t { flex: none; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--field); border-left: 0; background: var(--chip); font: 500 15px var(--mono); color: var(--ink); }
.pair .btn { min-height: 48px; padding: 0 16px; border-color: var(--field); border-left: 0; }
.field.out { display: flex; align-items: center; background: var(--chip); border-color: var(--rule); color: var(--ink); overflow-wrap: anywhere; }
.row.computed > .lab { color: var(--ink); }
.row.computed > .lab::after { content: " (the answer)"; color: var(--mute); }
input[type="datetime-local"].field { font-size: 16px; }

/* What was understood, said again under each field */
.line { margin: 6px 0 0; font: 500 13.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.line:empty { display: none; }
#per-line { margin-top: 2px; color: var(--mute); }
.help { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.note { margin: 6px 0 0; padding: 6px 10px; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--warn-bg); border-left: 3px solid var(--warn); }

/* Options, folded */
.more { border-top: 1px solid var(--rule); }
.more > summary { cursor: pointer; padding: 12px 0 2px; color: var(--ink); font-weight: 600; font-size: 15px; list-style-position: inside; }
#more-on { font: 500 13px var(--mono); color: var(--blue); }
.more-body { display: grid; gap: 16px; padding: 12px 0 2px; }

/* The result */
.ro-lab { margin: 0; font: 500 13px var(--mono); color: var(--mute); }
.ro-val { margin: 0; font: 500 clamp(32px, 3.7cqi, 46px)/1.1 var(--mono); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ro-val.long { font-size: clamp(24px, 2.7cqi, 34px); letter-spacing: -.02em; }
.ro-ends { margin: 2px 0 0; font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.ro-basis { margin: 0; font: 500 13.5px/1.5 var(--mono); color: var(--mute); overflow-wrap: anywhere; }
.ro-msg { margin: 4px 0 0; padding: 8px 12px; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--note-bg); border-left: 3px solid var(--note); }
.ro-off { margin: 0; font-size: 14.5px; color: var(--bad); }
.dl-out noscript { display: block; }
.ro-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.copy-st { font-size: 14px; color: var(--ok); }
.field.link { width: 100%; font-size: 13px; padding: 8px 10px; }
.ro-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }

/* This size at common speeds: a row is one button (its name), the whole row clicks */
.sp-cap { margin: 0; padding: 10px 14px; font-size: 14px; line-height: 1.5; border-bottom: 1px solid var(--rule); }
#sp-for { color: var(--ink); font-weight: 500; }
table.sp thead th { padding: 8px 10px; }
table.sp tbody tr { position: relative; }
table.sp tbody tr:hover { background: var(--tint); }
table.sp tbody th, table.sp td { padding: 9px 10px; }
table.sp tbody tr:last-child > * { border-bottom: 0; }
.sp-use { padding: 0; border: 0; background: none; color: var(--ink); font: 500 14.5px/1.4 var(--sans); text-align: left; cursor: pointer; }
.sp-use::after { content: ""; position: absolute; inset: 0; }
.sp-v, .sp-t { font: 500 14px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-v { white-space: nowrap; }
.sp-o { display: block; font: 400 12.5px var(--mono); color: var(--mute); }
@media (max-width: 640px) {
  table.sp thead th { font-size: 12px; }
  .sp-use { font-size: 14px; }
  .sp-v, .sp-t { font-size: 13px; }
}
table.sp tbody tr.cur { background: var(--press); }
table.sp tr.cur .sp-v::after { content: "in use"; display: block; font: 600 12px var(--mono); color: var(--blue); }

/* Estimate from progress */
.pg-out dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pg-out dl > div { min-width: 0; background: var(--sheet); padding: 10px 12px 12px; }
.pg-out dt { font: 500 12px var(--mono); color: var(--mute); }
.pg-out dd { margin: 0; padding-top: 4px; font: 500 15px/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.pg-out dd.big { font-size: 24px; letter-spacing: -.02em; }
.pg-msg { margin: 0; font: 500 13.5px/1.5 var(--mono); color: var(--mute); }
.pg-msg:empty { display: none; }
.pg-msg.bad { padding: 8px 12px; font: 400 15px/1.5 var(--sans); color: var(--ink); background: var(--note-bg); border-left: 3px solid var(--note); }

.dl-trust { margin: 0; font-size: 14.5px; color: var(--ink); max-width: 70em; }
.dl-trust code { background: var(--code); padding: 1px 5px; font-size: 13px; }
/* "How this calculates" on a narrow screen: each term above its text (its longest term left the text a narrow column) */
@media (max-width: 640px) {
  .spec dl { grid-template-columns: minmax(0, 1fr); }
  .spec dt { border-right: 0; border-bottom: 0; padding-bottom: 0; }
}

@media (min-width: 821px) {
  .dl-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "in out" "in link"; }
  .pg-body { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .dl-in, .pg-in { padding: 18px 20px 20px; }
  .dl-out, .pg-out { border-top: 0; border-bottom: 0; border-left: 1px solid var(--ink); padding: 20px 22px 22px; }
  .dl-link { align-content: start; border-left: 1px solid var(--ink); padding: 4px 22px 22px; }
  .pg-out dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-out dl > div:first-child, .pg-out dl > div:last-child { grid-column: 1 / -1; }
  table.sp thead th, table.sp tbody th, table.sp td { padding-inline: 14px; }
  .sp-o { display: inline; margin-left: 10px; }
}