/* KDP cover calculator page (book-sales-calculator/kdp-cover-calculator/index.html), on top of /assets/site.css and
   /book-sales-calculator/calc.css. The result markup comes from the extension's renderer (extension/src/cover-ui.js):
   p.cover-headline, table.cover-table, p.cover-spine-text, canvas.cover-preview, div.cover-downloads, p.note. */
/* Two columns: the paper and trim labels are long ("8.27 x 11.69 in (210.06 x 296.93 mm)"). */
.cover-form .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cover-form .grid + .grid { margin-top: 8px; }
.cover-form .custom-hint { grid-column: 1 / -1; margin-top: 0; }
.cover-form [aria-invalid="true"] { border-color: #a72222; box-shadow: 0 0 0 1px #a72222; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; border: 0; min-width: 0; }
.segmented legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 6px; padding: 0; font-size: 16px; font-weight: 600; }
.segmented label { position: relative; margin: 0; font-weight: 500; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmented span { display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid #8b96a5; background: #fff; cursor: pointer; }
.segmented label:first-of-type span { border-radius: 6px 0 0 6px; }
.segmented label:last-of-type span { border-radius: 0 6px 6px 0; border-left: 0; }
.segmented input:checked + span { background: #e8effc; border-color: #255cd1; color: #1d4cb0; font-weight: 650; }
.segmented input:focus-visible + span { outline: 2px solid #255cd1; outline-offset: 2px; }

.cover-result .cover-headline { margin-top: 0; font-size: 18px; }
.cover-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.cover-table th, .cover-table td { padding: 8px 0; border-bottom: 1px solid #e3e8ef; text-align: left; vertical-align: top; }
.cover-table th { width: 34%; padding-right: 12px; font-weight: 600; }
.cover-preview { display: block; width: 100%; height: auto; margin: 16px 0; border: 1px solid #cfd6e0; }
.cover-downloads { display: flex; flex-wrap: wrap; gap: 10px; }
.cover-downloads button { min-height: 48px; }
.cover-result .error { color: #a72222; }
.cover-result .error:empty { display: none; }

.cover-formula { font-weight: 600; }
.table-wrap { overflow-x: auto; }
.constants { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 16px; }
.constants caption { text-align: left; font-weight: 600; margin-bottom: 6px; }
.constants th, .constants td { padding: 8px 10px 8px 0; border-bottom: 1px solid #e3e8ef; text-align: left; vertical-align: top; }

@media (max-width: 640px) {
  .cover-form .grid { grid-template-columns: minmax(0, 1fr); }
  .cover-form .grid.custom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cover-table th { width: 40%; }
  .cover-downloads button { width: 100%; }
  .constants { font-size: 14px; }
  .constants th, .constants td { padding: 6px 6px 6px 0; }
}