/* The guided tour card and "Tour this page" trigger (app/tour.py,
   app/templates/_tour.html). Split out of _tour.html's own inline <style>
   block (Codex review, 2026-08-01) to keep that template's embedded-CSS
   line count under its architecture ratchet. base.html links this file so
   it reaches _tour.html wherever that partial is included; since the
   2026-08-07 conversion every page (phone view included) renders inside
   the desktop shell, so Bootstrap is always present for the card's own
   utility classes. */
.tour-card {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  max-width: 23rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--tr-brand, #2c6e49);
  border-radius: .5rem;
  padding: .9rem 1rem;
  box-shadow: 0 .5rem 1.5rem rgba(33, 37, 41, .25);
}
.tour-card:focus {
  outline: 3px solid var(--tr-brand, #2c6e49);
  outline-offset: 2px;
}
/* Ryan, phone hands-on 2026-08-10: on small pages the card covered
   everything. Slightly translucent at rest so the page shows through;
   fully solid the moment it is touched, hovered, or focused — reading
   the step never fights the transparency. */
.tour-card {
  opacity: .92;
  transition: opacity .15s ease;
}
.tour-card:hover,
.tour-card:focus-within,
.tour-card.is-dragging {
  opacity: 1;
}
/* The whole card is the drag surface (buttons and links opt out in
   tour_card.js). Selection is off at REST too: on Android the 450ms
   touch hold reads as "select this text" — the copy callout pops, the
   browser cancels our pointer events, and the drag dies before it lifts
   (Ryan, 2026-08-10). Tour copy is guidance, not quotable content. */
.tour-card {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tour-card a, .tour-card button, .tour-card input, .tour-card label {
  cursor: auto;
}
.tour-card.is-dragging {
  cursor: grabbing;
}
.tour-bullets li { margin-bottom: .25rem; }
.tour-card.is-collapsed {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.tour-card.is-collapsed .tour-card-head { margin-bottom: 0 !important; }
.page-tour-trigger-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .5rem;
}
@media (max-width: 600px) {
  .tour-card {
    left: 1rem;
    max-width: none;
    /* Above the phone view's bottom nav rail, never under or overlapping
       it -- --mobile-nav-height comes from css/mobile_bottom_nav.css when
       the rail is on the page; the fallback keeps the same lift on a
       narrowed desktop window, where the card floating a little higher is
       harmless. */
    bottom: calc(var(--mobile-nav-height, 4.25rem) + env(safe-area-inset-bottom) + 1rem);
  }
  /* Bootstrap's btn-sm is ~31px tall — fine for a pointer, thin for a
     thumb. The card's actions keep a 40px touch height at phone widths,
     the same floor the retired mobile shell gave them. */
  .tour-card .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}
.tour-spot {
  outline: 3px solid var(--tr-brand, #2c6e49);
  outline-offset: 3px;
  border-radius: 4px;
  position: relative;
}
.tour-spot::after {
  content: attr(data-tour-spot);
  position: absolute;
  top: -.7rem;
  left: -.7rem;
  z-index: 1081;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--tr-brand, #2c6e49);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* App chrome, not document content -- same reasoning as base.html's and
   mobile_bottom_nav.css's own @media print rules for the navbar/bottom-nav
   (Codex review, 2026-08-01). Printed from any page, this fixed-position card and
   trigger would otherwise land on top of a printed calendar or record. Both
   elements already carry a "no-print" class, but that class's own hiding
   rule is only defined LOCALLY inside the half-dozen dedicated print
   templates (audit_report.html, hs_transcript.html, etc.) -- an ordinary
   calendar or checklist page never had one, so this shared stylesheet is
   where a rule reaching every page belongs. */
@media print {
  .tour-card, #page-tour-trigger { display: none !important; }
}