/* 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; }
.reader-inner img.lead { max-width: 100%; height: auto; border-radius: 8px; margin: 0 0 1.4rem; }

/* 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; }