/* The only ShelfCanary specific CSS. Everything else is New Age verbatim.
 *
 * Kept in its own file so newage.css stays a clean copy of the theme's built
 * output, with exactly one documented patch in it. That matters the next time
 * the theme is updated: a diff against upstream should show one hunk, not a
 * hundred edits tangled through 244KB of compiled Bootstrap.
 */

/* The theme drew its feature icons with the Bootstrap Icons WEBFONT, loaded
   from a CDN, sized by `.icon-feature { font-size: 4rem }`, and coloured by
   `.text-gradient`, which paints a gradient behind the glyph and clips it to
   the text. None of that survives here: the CDN link is gone, and an inline
   <svg> is not text, so background-clip has nothing to clip to.
   The SVGs are the same Bootstrap Icons, MIT, pasted from the twbs/icons repo
   and sized and coloured as graphics instead. */
.icon-feature-svg {
  width: 4rem;
  height: 4rem;
  color: #2937f0;
}

/* The masthead's right column held an iPhone frame with a looping video of a
   phone app. There is no phone app, so it holds a screenshot of the real tool
   instead. Capped so a wide screenshot cannot outgrow its column. */
.hero-shot {
  max-width: 100%;
  height: auto;
}

/* The theme's section.cta uses `padding: 15rem 0` because it was built around a
   full bleed photograph that needed room to be seen. The photo is gone, so that
   padding left a flat gradient with a two line heading floating in the middle
   of an empty screen. Cut to something sized for the text that is actually
   there. */
section.cta {
  padding: 8rem 0;
}

/* ---- The drop target on teardown.html ----
   Bootstrap has no dashed drop zone, and this one has a real state change: the
   `over` class is added and removed by teardown.js on dragenter/dragleave, so
   the two states have to be visually distinct or the drag reads as broken.
   Colours are Bootstrap's own $primary and $gray tokens rather than new ones. */
#drop-zone {
  border: 2px dashed #ced4da;
  border-radius: 0.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
#drop-zone.over {
  border-color: #2937f0;
  background-color: #eef0fe;
}

/* The <input> is hidden from sight but never from the keyboard or the
   accessibility tree, and the <label> is the only visible surface. So the focus
   ring has to be drawn on the label from the input's own :focus-visible, or
   tabbing to the control shows nothing at all. */
#file-input:focus-visible + .btn {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(41, 55, 240, 0.4);
}