/* Beacon styles: the look of the original beacon.tbsp.org (grey menu bar,
   banner with the beacon photo and the TBSP logo, blue day blocks, mint
   patrol report boxes, yellow announcement bands, the green/red
   requirement box), with rounded corners, soft shadows and touch-sized
   buttons, on Bootstrap 5. */

:root {
  --tbsp-blue: #1240ab;        /* the old "Dark Blue" */
  --tbsp-day-blue: #2346d8;    /* the schedule's blue, a little softer than #00f */
  --tbsp-light-blue: #82a6f9;
  --tbsp-off-white: #d4dff9;
  --tbsp-link: #3a7fc2;        /* Bootstrap 3's link blue, as before */
  --tbsp-grey-bar: #e9e9eb;
  --tbsp-mint: #dcfdf7;
  --tbsp-mint-line: #b8eee4;
  --tbsp-band: #fff8d6;
  --tbsp-band-line: #f5e3a8;
  --tbsp-page: #f6f7f9;
  --tbsp-line: #e2e5ea;
  --tbsp-radius: .9rem;
  --tbsp-radius-sm: .6rem;
  --tbsp-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
  --tbsp-shadow-hover: 0 4px 16px rgba(16, 24, 40, .12);

  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "DejaVu Sans", sans-serif;
  --bs-body-font-size: .95rem;
  --bs-body-color: #2f3337;
  --bs-body-bg: var(--tbsp-page);
  --bs-link-color: var(--tbsp-link);
  --bs-link-color-rgb: 58, 127, 194;
  --bs-link-hover-color: #23527c;
  --bs-link-hover-color-rgb: 35, 82, 124;
  --bs-primary: #3a7fc2;
  --bs-primary-rgb: 58, 127, 194;
  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: .9rem;
  --bs-border-color: var(--tbsp-line);
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; color: #2f3337; }
:focus-visible { outline: 3px solid rgba(58, 127, 194, .45); outline-offset: 2px; }

/* --- Buttons: rounded, touch-sized (44px), icon + label ---------------- */
.btn { border-radius: 999px; font-weight: 500; padding: .5rem 1.05rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 2.25rem; padding: .3rem .85rem; font-size: .85rem; }
.btn-lg { min-height: 3.1rem; padding: .6rem 1.4rem; }
.btn .bi { font-size: 1.05em; }
.btn-primary { --bs-btn-bg: #3a7fc2; --bs-btn-border-color: #3a7fc2; --bs-btn-hover-bg: #2f6ca7;
  --bs-btn-hover-border-color: #2f6ca7; --bs-btn-active-bg: #285e8e; --bs-btn-active-border-color: #285e8e; }
.btn-success { --bs-btn-bg: #4caf50; --bs-btn-border-color: #4caf50; --bs-btn-hover-bg: #3f9a43;
  --bs-btn-hover-border-color: #3f9a43; --bs-btn-active-bg: #37873b; }
.btn-soft { background: #eef3fa; color: #2c5f93; border: 1px solid #dbe6f3; }
.btn-soft:hover { background: #e1ebf7; color: #23527c; text-decoration: none; }
.btn-soft-success { background: #e9f7ea; color: #2e7d32; border: 1px solid #cdebcf; }
.btn-soft-success:hover { background: #dcf1de; color: #256b29; }
.btn-soft-danger { background: #fdecec; color: #b42318; border: 1px solid #f8d0cd; }
.btn-soft-danger:hover { background: #fbe0de; color: #912018; }
.btn-ghost { background: transparent; color: #2c5f93; border: 1px solid transparent; }
.btn-ghost:hover { background: #eef3fa; text-decoration: none; }
a.btn:hover { text-decoration: none; }
.btn-group-wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-stack { display: grid; gap: .5rem; }
.btn-stack .btn { justify-content: flex-start; border-radius: var(--tbsp-radius-sm); }

/* Rows of actions: full width on phones, inline from tablets up */
@media (max-width: 576px) {
  .btn-group-wrap > .btn, .btn-group-wrap > form, .btn-group-wrap > form .btn { width: 100%; }
}

/* --- Menu bar, banner, test strip ------------------------------------- */
/* The menu bar sits on the banner, which runs up behind it, with no
   colour of its own: each item but the site name is a frosted lozenge, and a blur that fades
   out downward keeps whatever scrolls under it quiet. --nav-h is its
   closed height. */
:root { --nav-h: 56px; }
.navbar-tbsp { padding: .35rem 0; min-height: var(--nav-h); font-size: .86rem; position: sticky; top: 0; z-index: 1030; }
.navbar-tbsp::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.navbar-tbsp .nav-link, .navbar-tbsp .navbar-toggler {
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.navbar-tbsp .navbar-nav { gap: .35rem; }
.navbar-tbsp .navbar-brand { font-weight: 700; font-size: 1rem; color: #6b6f75; padding: .3rem 0; }
.navbar-tbsp .navbar-brand:hover { color: #44484d; text-decoration: none; }
.navbar-tbsp .nav-link { color: #6b6f75; padding: .5rem .85rem !important; border-radius: 999px; transition: background-color .15s, color .15s; }
.navbar-tbsp .nav-link:hover, .navbar-tbsp .nav-link:focus { color: #2f3337; background: rgba(255, 255, 255, .92); text-decoration: none; }
.navbar-tbsp .nav-link.active { color: #1f2328; background: #fff; box-shadow: var(--tbsp-shadow); }
.navbar-tbsp .nav-link .bi { margin-right: .3rem; }
.navbar-tbsp .dropdown-menu { font-size: .9rem; border: 0; border-radius: var(--tbsp-radius); padding: .4rem;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .16); }
.navbar-tbsp .dropdown-item { border-radius: var(--tbsp-radius-sm); padding: .55rem .75rem; }
.navbar-tbsp .dropdown-item .bi { width: 1.4rem; display: inline-block; color: #8a8f96; }
.navbar-tbsp .navbar-toggler { border: 0; padding: .45rem .6rem; }
.navbar-tbsp .navbar-toggler:focus { box-shadow: none; }
@media (max-width: 767px) {
  .navbar-tbsp .navbar-collapse { padding: .5rem 0 .75rem; }
  .navbar-tbsp .navbar-nav { gap: .3rem; }
  .navbar-tbsp .nav-link { padding: .7rem .9rem !important; font-size: 1rem; }
}

/* The banner: the old site's avalanche transceiver on the left (cut out of
   its pin-stripe background and faded in) and a faded strip of the
   USGS/Forest Service Norden quad with Castle Peak at the centre of the
   page (both from tools/make_banner.py), the logo on the right, and a
   thin TBSP blue-to-red line underneath. The map is masked out behind the
   transceiver and fades in after it, so the two never overlap. The banner
   starts under the menu bar, the map and transceiver running up behind
   it; the logo keeps to the 88px below. */
.top-banner { position: relative; height: calc(88px + var(--nav-h)); margin-top: calc(-1 * var(--nav-h)); overflow: hidden;
  background: linear-gradient(180deg, #fafbfc 0%, #eef1f5 100%);
  border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--tbsp-blue) 0%, var(--tbsp-link) 55%, #86070e 100%) 1; }
.top-banner::before, .top-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.top-banner::before {
  background: image-set(url("banner-topo.01b41bc33d12.jpg") 1x, url("banner-topo@2x.6e5e04371de6.jpg") 2x) center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 420px, #000 650px);
  mask-image: linear-gradient(90deg, transparent 420px, #000 650px); }
.top-banner::after { z-index: 1;
  background: image-set(url("banner-transceiver.873a534b0bc6.png") 1x, url("banner-transceiver@2x.4f476b7c4fe8.png") 2x) left center / auto 100% no-repeat; }
.top-banner .container { position: relative; z-index: 2; height: 100%; padding-top: var(--nav-h); display: flex; justify-content: flex-end; align-items: center; }
.top-banner img { height: 74px; filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .9)); }
@media (max-width: 576px) {
  .top-banner { height: calc(58px + var(--nav-h)); } .top-banner img { height: 48px; }
  .top-banner::after { background: image-set(url("banner-transceiver.873a534b0bc6.png") 1x, url("banner-transceiver@2x.4f476b7c4fe8.png") 2x) left bottom / auto 58px no-repeat; }
  .top-banner::before { -webkit-mask-image: linear-gradient(90deg, transparent 180px, #000 300px);
    mask-image: linear-gradient(90deg, transparent 180px, #000 300px); }
}

.dev-bar { background: #111; color: #fff; font-weight: 700; font-size: .78rem; padding: .2rem .75rem;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

main { min-height: 60vh; }
.page-title { font-size: 2rem; font-weight: 500; margin: .5rem 0 1.2rem; color: #2f3337; letter-spacing: -.01em; }
.crumbs { font-size: .85rem; margin-bottom: .25rem; color: #6b6f75; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }

/* --- Surfaces --------------------------------------------------------------- */
.card, .panel { border: 1px solid var(--tbsp-line); border-radius: var(--tbsp-radius); background: #fff;
  box-shadow: var(--tbsp-shadow); }
.panel { padding: 1.1rem 1.2rem; margin-bottom: 1.25rem; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.list-group { border-radius: var(--tbsp-radius); overflow: hidden; }
.form-control, .form-select { border-radius: var(--tbsp-radius-sm); min-height: 2.75rem; border-color: #d3d8df; }
.form-control-sm, .form-select-sm { min-height: 2.25rem; }
textarea.form-control { min-height: 5rem; }
.form-control:focus, .form-select:focus { border-color: #8db4dd; box-shadow: 0 0 0 .2rem rgba(58, 127, 194, .18); }
.form-label { font-weight: 600; font-size: .9rem; }
.form-check-input { width: 1.2em; height: 1.2em; }
.alert { border-radius: var(--tbsp-radius); border: 0; box-shadow: var(--tbsp-shadow); }
.modal-content { border: 0; border-radius: 1.1rem; box-shadow: 0 20px 50px rgba(16, 24, 40, .25); }
.modal-header, .modal-footer { border-color: var(--tbsp-line); }
.badge { border-radius: 999px; font-weight: 600; }
.unsent-mail pre { white-space: pre-wrap; max-height: 22rem; overflow: auto; font-size: .78rem; margin: 0;
  background: rgba(255, 255, 255, .6); padding: .6rem .75rem; border-radius: var(--tbsp-radius-sm); }
.nav-tabs { border-bottom: 0; gap: .35rem; }
.nav-tabs .nav-link { border: 0; border-radius: 999px; color: #5b6168; padding: .5rem 1rem; }
.nav-tabs .nav-link.active { background: #fff; color: #1f2328; box-shadow: var(--tbsp-shadow); }
.tab-content { border-radius: var(--tbsp-radius); }

/* --- Boxes of the old site ------------------------------------------------- */
.mmband { background: var(--tbsp-mint); border: 1px solid var(--tbsp-mint-line); border-radius: var(--tbsp-radius);
  padding: 1rem 1.15rem; margin-bottom: 1rem; font-size: .84rem; box-shadow: var(--tbsp-shadow);
  transition: box-shadow .15s; }
.mmband:hover { box-shadow: var(--tbsp-shadow-hover); }
.mmband .title { font-weight: 700; font-size: 1rem; }
.mmband .texts div { margin: .12rem 0; }
.mmband .footer-row { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .7rem; font-size: .8rem; }
.band { background: var(--tbsp-band); border: 1px solid var(--tbsp-band-line); border-radius: var(--tbsp-radius);
  padding: 1rem 1.15rem; margin-bottom: 1rem; box-shadow: var(--tbsp-shadow); }
.band .byline { text-align: right; font-size: .78rem; margin-top: .4rem; }
.redbox { border: 5px solid #e53935; padding: 1rem 1.2rem; border-radius: var(--tbsp-radius); margin: 1rem 0; background: #fff;
  box-shadow: var(--tbsp-shadow); }
.redbox.good { border-color: #43a047; }
.redbox .row-line { display: flex; justify-content: space-between; padding: .15rem 0; }
.redbox .karma { font-weight: 700; color: #c62828; }
.redbox.good .karma { color: #2e7d32; }

.nameplate { text-align: center; }
.drop-shadow { box-shadow: 0 4px 12px rgba(16, 24, 40, .25); }
.headshot { object-fit: cover; background: #dfe3e8; border-radius: 1rem; }
.headshot.round { border-radius: 50%; }

.box-heading { font-size: 1.45rem; margin: .5rem 0 .75rem; }

/* My upcoming patrols: tappable rows */
.event-list { display: grid; gap: .5rem; margin-bottom: 1rem; }
.event-row { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--tbsp-line);
  border-radius: var(--tbsp-radius); padding: .6rem .7rem; box-shadow: var(--tbsp-shadow); color: inherit;
  transition: box-shadow .15s, transform .1s; }
.event-row:hover { box-shadow: var(--tbsp-shadow-hover); text-decoration: none; }
.event-row .mini-date { flex-shrink: 0; width: 3rem; text-align: center; border-radius: .6rem; border: 2px solid var(--tbsp-day-blue);
  line-height: 1; padding: .25rem 0; background: #fff; }
.event-row .mini-date .m { font-size: .62rem; font-weight: 700; text-transform: uppercase; display: block; }
.event-row .mini-date .d { font-size: 1.25rem; font-weight: 700; display: block; }
.event-row .mini-date .w { font-size: .6rem; font-weight: 700; color: var(--tbsp-day-blue); text-transform: uppercase; display: block; }
.event-row .what { min-width: 0; flex-grow: 1; }
.event-row .what .name { font-weight: 600; display: block; color: #2c5f93; }
.event-row .what .sub { font-size: .78rem; color: #6b6f75; }

/* --- Schedule ------------------------------------------------------------------- */
.week { margin-bottom: 1.75rem; }
.week-header { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  padding-top: .75rem; margin-bottom: .6rem; }
.week-header h2 { font-size: 1.45rem; margin: 0; }
.dayblock { border: 3px solid var(--tbsp-day-blue); border-radius: var(--tbsp-radius); padding: .9rem 1rem; height: 100%;
  background: #fff; box-shadow: var(--tbsp-shadow); }
.dayblock .month { font-weight: 700; font-size: .9rem; text-transform: uppercase; line-height: 1; letter-spacing: .03em; }
.dayblock .daynum { font-weight: 700; font-size: 2.8rem; line-height: .95; }
.dayblock .weekday { font-weight: 700; font-size: .9rem; text-transform: uppercase; color: var(--tbsp-day-blue); line-height: 1.1;
  letter-spacing: .03em; }
.single-event { margin-top: .8rem; cursor: pointer; padding: .6rem .7rem; border-radius: var(--tbsp-radius-sm);
  background: #f7f9fe; border: 1px solid #e6ecfa; transition: background-color .15s, box-shadow .15s; }
.single-event:hover { background: #eef3fd; box-shadow: var(--tbsp-shadow); }
.single-event .event-class { font-weight: 700; font-size: 1.05rem; color: var(--tbsp-day-blue); text-transform: capitalize; }
.single-event .description { font-size: .76rem; margin: .2rem 0 .4rem; color: #555b62; }
.single-event .role-line { font-size: .76rem; margin-top: .3rem; }
.single-event .role-line .role { color: #4a5be0; font-weight: 700; }
.single-event.mine { background: #e7efff; border-color: #c9d8fb; }
.single-event .mine-label { font-size: .68rem; font-weight: 700; color: #fff; background: var(--tbsp-blue);
  border-radius: 999px; padding: .05rem .45rem; margin-left: .35rem; vertical-align: middle; }
.single-event .spots { font-size: .78rem; color: #2e7d32; font-weight: 600; }
.single-event .actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.name-chip { display: inline-block; padding: .05rem .5rem; margin: 0 .15rem .25rem 0; border-radius: 999px;
  background: #fff; border: 1px solid #dbe3f3; font-size: .74rem; color: #2c5f93; }
.name-chip:hover { background: #eef3fa; text-decoration: none; }
.manager-chip { display: inline-flex; align-items: center; gap: .4rem; }

/* --- Event page ------------------------------------------------------------------- */
.datebox { border: 3px solid var(--tbsp-day-blue); border-radius: var(--tbsp-radius); display: inline-block; text-align: center;
  padding: .35rem .7rem; line-height: .95; background: #fff; box-shadow: var(--tbsp-shadow); }
.datebox .month, .datebox .weekday { font-size: .9rem; font-weight: 700; text-transform: uppercase; }
.datebox .weekday { color: var(--tbsp-day-blue); }
.datebox .daynum { font-size: 2.8rem; font-weight: 700; }
.event-details h2 { font-size: 1.9rem; font-weight: 700; }
.event-details h3 { font-size: 1.3rem; margin-top: 1.1rem; }
.event-details h4 { font-size: 1.1rem; margin-top: 1rem; }
.roster-card { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem; border-radius: var(--tbsp-radius);
  background: #fff; border: 1px solid var(--tbsp-line); box-shadow: var(--tbsp-shadow); margin-bottom: .6rem; }
.roster-card .who { flex-grow: 1; min-width: 0; }
.roster-card .who .name { font-weight: 600; font-size: 1.02rem; }
.roster-card .who .meta { font-size: .8rem; color: #6b6f75; }
.roster-card .contact { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.roster-card .contact .btn { font-size: .78rem; min-height: 2rem; padding: .2rem .7rem; }
.comment { background: #fff; border: 1px solid var(--tbsp-line); border-radius: 1rem 1rem 1rem .3rem; padding: .7rem .9rem;
  margin-bottom: .6rem; box-shadow: var(--tbsp-shadow); }
.comment .who { font-size: .78rem; color: #6b6f75; margin-bottom: .2rem; }
pre.comment-text, pre.reminder-text { white-space: pre-wrap; font-family: inherit; margin: 0; font-size: .92rem; }

/* --- Tables --------------------------------------------------------------------------- */
.table-wrap { border-radius: var(--tbsp-radius); overflow: hidden; border: 1px solid #c9ced6; background: #fff;
  box-shadow: var(--tbsp-shadow); }
.table-wrap .table { margin: 0; }
.table-tbsp > :not(caption) > * > * { border-bottom: 1px solid #dde1e6; padding: .55rem .6rem; }
.table-tbsp > :not(caption) > * > * + * { border-left: 1px solid #e6e9ee; }
.table-tbsp thead th { font-weight: 700; background: #f1f3f6; }
.table-tbsp tbody tr:hover > * { background: #f8fafc; }
.roster-table td { vertical-align: top; }
.table thead th { font-weight: 700; }

/* --- Tiles (tools, admin menu) ---------------------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.tile { display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border-radius: var(--tbsp-radius);
  background: #fff; border: 1px solid var(--tbsp-line); color: #2f3337; box-shadow: var(--tbsp-shadow); min-height: 3.2rem;
  transition: box-shadow .15s, border-color .15s; font-size: .9rem; line-height: 1.25; }
.tile:hover { box-shadow: var(--tbsp-shadow-hover); border-color: #c8d7ea; text-decoration: none; color: #1f2328; }
.tile .bi { font-size: 1.15rem; color: #3a7fc2; width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: grid; place-items: center;
  background: #eef3fa; border-radius: .6rem; }
.tile.danger .bi { color: #c62828; background: #fdecec; }
.tile-section { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6f75;
  margin: 1.25rem 0 .5rem; }

/* --- Login ------------------------------------------------------------------------------- */
.login-panel { max-width: 34rem; }
.login-intro { font-size: .95rem; }
.login-headline { font-size: 2rem; margin: 1rem 0 .8rem; }

/* --- Footer ---------------------------------------------------------------------------------- */
.footer-nav { text-align: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--tbsp-line); }
.footer-nav .links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.footer-nav .links a { padding: .4rem .85rem; border-radius: 999px; color: #5b6168; }
.footer-nav .links a:hover { background: #eceef1; text-decoration: none; color: #2f3337; }
.footer-nav .copy { font-size: .78rem; margin-top: .8rem; color: #8a8f96; }

@media print {
  .no-print, nav, footer, .top-banner, .dev-bar, .btn { display: none !important; }
  body { background: #fff; }
  .panel, .card, .mmband, .dayblock { box-shadow: none; }
}

/* Narrow columns: let rows shrink, wrap long words, keep stacked buttons left-aligned */
.event-list > *, .tile-grid > * { min-width: 0; }
.event-row { overflow: hidden; }
.event-row .what .name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.btn-stack .btn { text-align: left; }
.panel, .mmband, .band, .roster-card { overflow-wrap: anywhere; }

/* Photo thumbnails on patrol reports */
.thumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.thumb { display: block; width: 72px; height: 72px; border-radius: .55rem; overflow: hidden; background: #e8ecef;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .2); transition: transform .12s, box-shadow .12s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 4px 12px rgba(16, 24, 40, .25); }
.thumb.more { display: grid; place-items: center; font-weight: 700; color: #2c5f93; text-decoration: none; }
.report-view .thumb, .col-lg-8 .thumbs .thumb { width: 96px; height: 96px; }

/* Patrol report cards (home page, report lists) */
.report-card { background: #fff; border: 1px solid var(--tbsp-line); border-radius: var(--tbsp-radius); box-shadow: var(--tbsp-shadow);
  margin-bottom: 1rem; overflow: hidden; transition: box-shadow .15s; }
.report-card:hover { box-shadow: var(--tbsp-shadow-hover); }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .8rem 1.1rem;
  background: var(--tbsp-mint); border-bottom: 1px solid var(--tbsp-mint-line); }
.report-head .min-w-0 { min-width: 0; }
.report-head .title { font-weight: 700; font-size: 1.05rem; color: #1f4f7f; }
.report-head .sub { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .8rem; color: #4d5a63; margin-top: .1rem; }
.report-head .status { flex-shrink: 0; font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.report-head .status.ok { background: #e3f4e4; color: #2e7d32; }
.report-head .status.open { background: #fff4d6; color: #8a6100; }
.report-body { padding: .9rem 1.1rem .4rem; }
.report-body .lead-text { font-size: .95rem; line-height: 1.5; margin: 0 0 .8rem; color: #2f3337; }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .55rem .9rem; margin: 0 0 .7rem; }
.note { min-width: 0; }
.note dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b6f75; margin-bottom: .1rem; }
.note dt .bi { color: #2a9d8f; margin-right: .3rem; }
.note dd { margin: 0; font-size: .86rem; line-height: 1.4; color: #3a3f44; }
.report-body .thumbs { margin: .2rem 0 .7rem; }
.report-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem .75rem; border-top: 1px solid #eef0f3; }
.report-foot .people { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .82rem; color: #5b6168; }
@media (max-width: 576px) { .report-foot .btn { width: 100%; } }

/* The full report page */
.report-section { margin-bottom: 1rem; }
.report-section h2 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b6f75; margin: 0 0 .35rem; }
.report-section h2 .bi { color: #2a9d8f; margin-right: .35rem; }
.report-section .body { white-space: pre-wrap; font-size: .95rem; line-height: 1.5; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.stat-tile { background: #f6f8fb; border: 1px solid var(--tbsp-line); border-radius: var(--tbsp-radius-sm); padding: .55rem .7rem; }
.stat-tile .value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.stat-tile .label { font-size: .75rem; color: #6b6f75; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .9rem; }
.facts dt { color: #6b6f75; font-weight: 500; }
.facts dd { margin: 0; }
.signature { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.35rem; color: #1f4f7f; }
.thumb.thumb-lg { width: 110px; height: 110px; }

/* Row action on "My Upcoming Patrols": icon + short word */
.event-row .row-action { flex-shrink: 0; flex-direction: column; gap: 0; min-width: 3.4rem; padding: .3rem .5rem; line-height: 1.1;
  border-radius: .7rem; font-size: .7rem; font-weight: 600; }
.event-row .row-action .bi { font-size: 1.05rem; margin: 0; }

/* "My Upcoming Patrols": event on top, a clearly labelled report button below */
.event-row { flex-direction: column; align-items: stretch; gap: .55rem; }
.event-row-top { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.event-row .what .name { -webkit-line-clamp: 3; }
.crew-list { display: grid; gap: .5rem; }
.crew-member { padding: .5rem .6rem; border-radius: var(--tbsp-radius-sm); background: #f6f8fb; border: 1px solid #eceff3; }
.crew-member .btn { font-size: .78rem; min-height: 1.9rem; }

/* Report buttons of a patrol day: one per existing report, then "Start" */
.report-buttons { display: grid; gap: .35rem; }
.report-buttons .btn { justify-content: flex-start; text-align: left; border-radius: var(--tbsp-radius-sm); }
.report-buttons .report-note { font-size: .72rem; color: #6b6f75; line-height: 1.3; }
.report-buttons:not(.compact) { max-width: 26rem; }


/* Operations page: the one way into the Django admin, collapsed */
.danger-zone { border: 2px solid #b02a37; border-radius: var(--tbsp-radius); background: #fff1f2; padding: .8rem 1rem; }
.danger-zone > summary { font-weight: 700; color: #b02a37; cursor: pointer; }
.danger-zone > summary .bi { margin-right: .3rem; }
.danger-zone > p { color: #5c1a20; font-size: .9rem; }

/* Macros in announcements: green works here, red is shown as written */
mark.macro { padding: .05rem .3rem; border-radius: .3rem; font-family: var(--bs-font-monospace); font-size: .85em; white-space: nowrap; }
mark.macro.ok { background: #d1f2dd; color: #0f5132; border: 1px solid #9bd8b0; }
mark.macro.bad { background: #fde2e4; color: #842029; border: 1px solid #f1aeb5; text-decoration: wavy underline #dc3545; }
.macro-summary { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; margin-bottom: .4rem; }
.macro-summary mark.macro { margin-left: .25rem; }
.plain-mail { font-family: var(--bs-font-monospace); font-size: .82rem; white-space: pre-wrap; max-height: 24rem; overflow: auto; }
.manager-note h4 { font-size: 1rem; font-weight: 600; margin-top: .25rem; }
.manager-note ol { padding-left: 1.2rem; }

/* Mailing lists: name | about | subscribe */
.list-rows { display: grid; gap: .6rem; }
.list-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.4fr) 9.5rem; gap: 1rem; align-items: center;
  background: #fff; border: 1px solid #e6e9ee; border-radius: var(--tbsp-radius); padding: .8rem 1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.list-row.is-subscribed { border-left: 4px solid #2e9d5b; }
.list-row > * { min-width: 0; }
.list-name .alias { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.list-name a { overflow-wrap: anywhere; }
.list-about .desc { margin-bottom: .2rem; }
.list-about .facts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: #5b6168; }
.list-about details summary { cursor: pointer; color: var(--bs-link-color); }
.list-action { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; text-align: center; }
@media (max-width: 640px) {
  .list-row { grid-template-columns: 1fr; gap: .5rem; }
}

/* Resources page */
.resource-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr) 4rem auto; gap: .8rem; align-items: center;
  background: #fff; border: 1px solid #e6e9ee; border-radius: var(--tbsp-radius); padding: .6rem 1rem; }
.resource-row > * { min-width: 0; }
@media (max-width: 640px) { .resource-row { grid-template-columns: 1fr; gap: .3rem; } }

/* Add users to events by status: one checkbox per event */
.event-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .35rem; max-height: 28rem; overflow: auto; padding: .25rem; border: 1px solid #e6e9ee; border-radius: var(--tbsp-radius-sm); }
.event-check { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem .55rem; border-radius: var(--tbsp-radius-sm); background: #f6f8fb; cursor: pointer; font-size: .88rem; }
.event-check:has(input:checked) { background: #e3efff; outline: 1px solid #9ec5fe; }
.event-check input { margin-top: .2rem; flex: none; }

/* Patrol log (from the field app) on the report page */
.patrol-log { list-style: none; padding: 0; margin: 0; }
.patrol-log li { display: grid; grid-template-columns: 3rem 1.4rem 1fr; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid #eef1f4; align-items: start; }
.patrol-log li:last-child { border-bottom: 0; }
.patrol-log .when { font-variant-numeric: tabular-nums; color: #5b6168; }
.patrol-log .bi { color: var(--tbsp-link); }
.patrol-log .kind-start { color: #1e8e4f; } .patrol-log .kind-end { color: #c62828; } .patrol-log .kind-snow_obs { color: #0aa2c0; }
.patrol-log .body { white-space: pre-wrap; }
.patrol-log .where { display: block; text-decoration: none; }
.app-promo { display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; margin-bottom: 1rem; border-radius: var(--tbsp-radius); background: #eef4ff; border: 1px solid #cfe0ff; color: #1d3f73; text-decoration: none; }
.app-promo .bi { font-size: 1.7rem; color: var(--tbsp-link); }
.app-promo:hover { background: #e3edff; }

/* Patrol report form: patrollers already on another team's report */
.crew-taken { color: #9aa1a8; }
.crew-taken small { font-size: .78rem; }
.report-buttons .btn.mine { border-color: #9ec5fe; background: #e7f0ff; }
.help-list { padding-left: 1.1rem; margin: .1rem 0 .4rem; }
.help-list li { margin: .05rem 0; }
.patrol-log .snow-obs { display: flex; flex-wrap: wrap; gap: .2rem .9rem; color: #3b444e; }

/* Looking at reports (reports/all.html, _browse_tabs.html) */
.browse-tabs .nav-link i { margin-right: .4rem; }
.search-help summary { cursor: pointer; color: var(--bs-secondary-color); }
.search-help ul { padding-left: 1.2rem; margin-top: .4rem; }
.search-hit .snippet { color: #3b4046; }
.search-hit .snippet mark { background: #fff1a8; padding: 0 .1em; border-radius: 2px; }
.search-hit .found-in .badge { font-weight: 500; margin-left: .25rem; }
.search-hit .found-in .badge.meaning { margin-left: 0; background: #ece6fb; color: #4b3a8c; }