/* tool.css — makes the reader tool work inside the Tabler shell (/new preview).
   Only what the ported JS needs that Tabler doesn't provide: a display:none shim
   for the JS's .hidden toggles, the spinner, reader typography, the segmented
   control, and the reading-mode collapse. Everything else uses Tabler classes. */

.hidden { display: none !important; }

@keyframes rp-spin { to { transform: rotate(360deg); } }
.spinner {
  width: 14px; height: 14px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 9999px;
  display: inline-block; animation: rp-spin .7s linear infinite; vertical-align: -2px;
}

/* Reader article typography (framework-agnostic — reads cleanly under Tabler). */
#reader { padding: .5rem 0 3rem; }
.reader-inner { max-width: 44rem; margin: 0 auto; padding: 0 1rem;
  font-size: var(--reader-fs, 1.15rem); line-height: 1.75; }
#reader.wide .reader-inner { max-width: 62rem; }
.reader-inner h1 { font-family: "Fraunces", Georgia, serif; font-weight: 700;
  font-size: 2rem; line-height: 1.25; margin: .4rem 0 1.4rem; }
.reader-inner p { margin: 0 0 1.15rem; }
/* The cover image holds its space from the first frame. Without a box it arrived ~220px tall
   after the text and pushed the headline and article down: half the reader's layout-shift
   score (15 Oct 2026). 1.91:1 is the social-card shape news sites publish their image in;
   other shapes, and small images, are fitted inside the box instead (.fit, set on load). */
.reader-inner img.lead { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover;
  background: var(--tblr-bg-surface-secondary, #f1f3f5); border-radius: 8px; margin: 0 0 1.4rem; }
.reader-inner img.lead.fit { object-fit: scale-down; }

/* Full-page render frame */
#frame { width: 100%; min-height: 80vh; border: 0; background: #fff; }
#notice { padding: 3rem 1rem; }

/* Segmented control (Reader / Full page) */
#viewToggle { background: var(--tblr-bg-surface-secondary, #f1f3f5); padding: 3px; border-radius: 8px; display: inline-flex; gap: 2px; }
.seg { border: 0; background: transparent; color: var(--tblr-secondary, #64748b);
  font-weight: 500; font-size: .8rem; padding: .25rem .6rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.seg.active { background: var(--tblr-bg-surface, #fff); color: var(--tblr-body-color, #0f172a); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }

/* While an article is showing, hide the idle-only hero extras to free reading space. */
body.reading .rp-when-idle { display: none; }
/* While reading, and while a read loads, the page is at least a screen tall, so the footer
   waits below the fold. It sat in view during the wait and jumped away when the article
   arrived: the other half of the score (15 Oct 2026). */
body.reading main { min-height: 100vh; }