/* ============================================================================
   Sheetposting — cream paper, toga-party red, warm ink. Mobile-first, light.
   One stylesheet for index.html (the feed) and admin.html (the bouncer).
   ========================================================================= */

:root {
  /* palette */
  --paper:    #F3E9D3;   /* page ground */
  --paper-0:  #FBF5E8;   /* fillable fields, one step lighter than the page */
  --paper-2:  #EADDBF;   /* cards, panels, dock */
  --paper-3:  #DFCFA8;   /* borders, dividers */
  --ink:      #1C1712;   /* text, warm near-black */
  --ink-2:    #4A3D30;   /* secondary text */
  --ink-3:    #7E6B57;   /* muted */
  --red:      #C4302B;   /* primary buttons, active states */
  --red-2:    #9E241F;   /* pressed */
  --mustard:  #E2A72E;   /* accent badges, highlights */
  --brown:    #7A4B24;   /* beer stains */
  --green:    #3E7B3F;   /* the one functional "it worked" colour */

  /* texture: a paper grain tile, multiplied over the cream at ~7% */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* shadows: warm, like a print laid on a table */
  --shadow-print: 0 1px 2px rgba(60, 40, 20, .12), 0 6px 16px rgba(60, 40, 20, .18);
  --shadow-soft:  0 10px 30px rgba(60, 40, 20, .22);
  --press:        0 2px 0 var(--ink);
  --press-down:   0 1px 0 var(--ink);

  --dock-h:     62px;
  --radius:     14px;
  --radius-sm:  9px;
  --pin-radius: 12px;

  --display: 'Titan One', 'Cooper Black', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --marker:  'Permanent Marker', 'Comic Sans MS', cursive;
  --body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; background: var(--paper); }

body {
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* the grain sits under everything, above the flat cream */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 260px 260px;
  opacity: .07;
  mix-blend-mode: multiply;
  pointer-events: none;
}

img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--red); }
svg { display: block; }
::selection { background: rgba(226, 167, 46, .45); }

/* beer rings: thin, faint, slightly lopsided, always behind content */
.ring {
  position: absolute;
  z-index: -1;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle,
      transparent 0 53%,
      rgba(122, 75, 36, .10) 55% 61%,
      rgba(122, 75, 36, .04) 62% 64.5%,
      transparent 66%);
  transform: rotate(-12deg) scale(1, .94);
}

/* --------------------------------------------------------------- appbar --- */

.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: rgba(243, 233, 211, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--paper-3);
  overflow: hidden;
}
.appbar .ring { width: 132px; height: 132px; right: 46px; top: -78px; z-index: 0; }

.brand { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; }

/* The lockup is a finished piece of art: it carries the mark, the wordmark and
   the tagline, so the bar holds nothing else. Height drives it so the bar's own
   height never depends on how wide the word is. */
.wordmark { margin: 0; line-height: 0; display: block; min-width: 0; }
.logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
}
@media (min-width: 768px) {
  .logo { height: 64px; }
  .appbar { padding-left: 20px; padding-right: 20px; }
}

.appbar-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--ink);
  color: var(--paper);
  box-shadow: var(--press);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:active { transform: translateY(1px); box-shadow: var(--press-down); background: var(--red-2); }
@media (hover: hover) { .icon-btn:hover { background: var(--red-2); } }
.icon-btn:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

.subline {
  position: relative;
  margin: 0;
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: center;
}
/* ---------------------------------------------------------------- nudge --- */
/* "Add a Sheet!" scrawled under the bar with an arrow curling up to the +.
   It sits in normal flow so it scrolls away with the rest of the header
   furniture, and it stays clear of the bar rather than reaching over it: the
   bar is sticky, and anything drawn on top of it would smear across the
   lockup on the way past. Absolute, so the subline stays centred on the page
   and not on whatever space is left beside this. */

.topbits { position: relative; }

.nudge {
  position: absolute;
  right: 8px;
  top: 2px;
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.nudge-txt {
  font-family: var(--marker);
  font-size: 12.5px;
  line-height: 1.06;
  color: var(--ink-2);
  text-align: right;
  transform: rotate(-4deg);
  padding-bottom: 3px;
}
.nudge-arr {
  width: 25px;
  height: 31px;
  flex: 0 0 auto;
  color: var(--red);
  overflow: visible;
}
@media (min-width: 768px) {
  .nudge { right: 10px; top: 6px; }
  .nudge-txt { font-size: 14px; }
  .nudge-arr { width: 30px; height: 37px; }
}
/* 360px Android phones leave only a few pixels between the subline and the
   scrawl, and Permanent Marker failing to load would close that gap, so the
   scrawl gives some width back in that range. */
@media (max-width: 374px) {
  .nudge { right: 6px; gap: 0; }
  .nudge-txt { font-size: 11.5px; }
  .nudge-arr { width: 22px; height: 27px; }
}
/* Under 360px the subline runs the full width of the line and no amount of
   trimming keeps them apart. Nothing is lost by dropping it: the + is still
   there, still labelled, still the only button in the bar. */
@media (max-width: 359px) {
  .nudge { display: none; }
}

/* ------------------------------------------------------------- layout ---- */

main {
  position: relative;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 28px);
}
/* the second ring straddles the subline and the top of the feed; it lives in
   <main> because app.js rewrites .subline's text */
main > .ring-top { width: 104px; height: 104px; left: 10px; top: -44px; }

.view { display: none; position: relative; }
.view.active { display: block; }
#view-sheets .ring { width: 138px; height: 138px; right: 18px; bottom: -6px; }

/* --------------------------------------------------------------- tally --- */
/* How many sheets are up, sitting right above the collage. The number is the
   whole point of the line, so it takes the display face and the action
   colour while the word stays the same micro-caps as the subline. */

.tally {
  position: relative;
  margin: 0;
  padding: 2px 16px 9px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-3);
}
.tally b {
  display: inline-block;
  margin-right: 5px;
  vertical-align: -2px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--red);
}
/* a sheet landing while you are looking at the feed should be felt, not just
   counted; the toast says what happened, this says how many that makes */
.tally.bump b { animation: tally-bump .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tally-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.3) rotate(-4deg); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tally.bump b { animation: none; }
}

/* ------------------------------------------------------------- masonry --- */
/* CSS multi-column is what gives pins their organic fit: each pin keeps the
   photo's own aspect ratio and columns fill to whatever height results. */

.masonry {
  columns: 2;
  column-gap: 10px;
  padding: 2px 10px 0;
}
@media (min-width: 640px)  { .masonry { columns: 3; column-gap: 14px; padding: 4px 14px 0; } }
@media (min-width: 960px)  { .masonry { columns: 4; } }
@media (min-width: 1320px) { .masonry { columns: 5; max-width: 1600px; margin: 0 auto; } }

.pin {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 640px) { .pin { margin-bottom: 20px; } }

/* The shape wrapper carries the collage ratio; the photo fills it, biased a
   little toward the top because sheets hang from porches and railings. */
.pin-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--pin-radius);
  border: 1px solid var(--paper-3);
  background: var(--paper-2);
  box-shadow: var(--shadow-print);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pin-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.pin:active .pin-img { transform: scale(.985); box-shadow: 0 1px 2px rgba(60, 40, 20, .12); }
@media (hover: hover) { .pin:hover .pin-img { transform: translateY(-2px); box-shadow: 0 2px 3px rgba(60, 40, 20, .12), 0 12px 24px rgba(60, 40, 20, .22); } }
.pin:focus-visible .pin-img { outline: 3px solid var(--red); outline-offset: 3px; }

.pin-cap {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  margin: 9px 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pin-cap.blank { font-weight: 400; font-style: italic; color: var(--ink-3); }

.pin-loc {
  font-size: 12px;
  color: var(--ink-3);
  margin: 3px 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* skeleton pins, at assorted heights so the loading state looks like a feed */
.sk {
  break-inside: avoid;
  margin: 0 0 16px;
  border-radius: var(--pin-radius);
  border: 1px solid var(--paper-3);
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- dock --- */

/* pull-to-refresh badge, parked just above the app bar until dragged down */
.ptr {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: -48px;
  z-index: 45;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-print);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.ptr.snap { transition: transform .2s ease; }
.ptr.ready { color: var(--red); }
.ptr.spinning .ptr-spin { animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

.dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--paper-2);
  border: 1.5px solid var(--paper-3);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(60, 40, 20, .28), 0 1px 2px rgba(60, 40, 20, .12);
}
.dock button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dock button svg { width: 19px; height: 19px; }
.dock button[aria-selected="true"] { background: var(--red); color: var(--paper); }
.dock button:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }

/* -------------------------------------------------------- empty states --- */

.empty {
  text-align: center;
  padding: 36px 22px;
  margin: 10px 14px;
  color: var(--ink-2);
  border: 2px dashed var(--paper-3);
  border-radius: var(--radius);
  background: rgba(234, 221, 191, .45);
}
.empty .big { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.empty h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  font-size: 22px;
  margin: 0 0 7px;
}
.empty p { margin: 0 auto; max-width: 32ch; font-size: 13.5px; line-height: 1.5; }
.empty .btn { margin-top: 16px; }
@media (min-width: 680px) { .empty { max-width: 560px; margin-left: auto; margin-right: auto; } }

.footer {
  position: relative;
  padding: 26px 22px 8px;
  text-align: center;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 6px auto 0;
}

/* ------------------------------------------------------------ the door --- */
/* The way into the bouncer from the feed: seven taps in the bottom right,
   under the last of the sheets. It has to read as empty paper, so it carries
   no ink of its own until a deliberate run is already three taps deep. */

.door-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 0 8px;
}
.door {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 80px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  cursor: default;
  touch-action: manipulation;          /* no double-tap zoom on a fast run */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.door:focus { outline: none; }

.door-dots {
  position: absolute;
  right: 14px;
  bottom: 16px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity .2s ease;
}
.door.knocking .door-dots { opacity: 1; }

.door-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: .2;
  transform: scale(.78);
  transition: opacity .14s ease, transform .14s ease, background-color .14s ease;
}
.door-dots i.lit {
  background: var(--red);
  opacity: 1;
  transform: scale(1);
}
.door.opening .door-dots i {
  background: var(--red);
  opacity: 1;
  transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
  .door-dots, .door-dots i { transition: none; }
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .01em;
  line-height: 1.15;
  box-shadow: var(--press);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); box-shadow: var(--press-down); background: var(--red-2); }
@media (hover: hover) { .btn:hover { background: var(--red-2); } }
.btn:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; }

.btn.quiet, .btn.ghost { background: var(--paper-2); color: var(--ink); }
.btn.quiet:active, .btn.ghost:active { background: var(--paper-3); }
@media (hover: hover) { .btn.quiet:hover, .btn.ghost:hover { background: var(--paper-3); } }

.btn.danger { background: transparent; color: var(--red); border-color: var(--red); box-shadow: 0 2px 0 var(--red); }
.btn.danger:active { background: rgba(196, 48, 43, .08); box-shadow: 0 1px 0 var(--red); }
@media (hover: hover) { .btn.danger:hover { background: rgba(196, 48, 43, .08); } }

.btn.sm { padding: 8px 14px; font-size: 14px; font-family: var(--body); font-weight: 700; }
.btn.xs { padding: 6px 11px; font-size: 12.5px; font-family: var(--body); font-weight: 700; }
.btn.share-btn { padding: 9px 20px; font-size: 16px; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 auto; }

.round-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  box-shadow: var(--press);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .08s ease, box-shadow .08s ease;
}
.round-btn svg { width: 21px; height: 21px; }
.round-btn:active { transform: translateY(1px); box-shadow: var(--press-down); }
.round-btn:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .sub { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }
.input, textarea.input, select.input {
  width: 100%;
  background: var(--paper-0);
  border: 1.5px solid var(--paper-3);
  border-radius: 10px;
  padding: 12px 13px;
  color: var(--ink);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  outline: none;
}
.input::placeholder { color: var(--ink-3); opacity: .75; }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(196, 48, 43, .16); }
textarea.input { min-height: 84px; resize: vertical; line-height: 1.4; }
.charcount { text-align: right; font-size: 11px; color: var(--ink-3); margin-top: 4px; }

.checkline { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.checkline input { width: 18px; height: 18px; accent-color: var(--red); }

.note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--paper-2);
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
  margin: 0 0 14px;
}

/* -------------------------------------------------------------- sheets --- */

.sheet {
  position: fixed; inset: 0;
  z-index: 90;
  background: rgba(74, 61, 48, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  overscroll-behavior: contain;
}
.sheet.open { display: block; }

.sheet-inner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 94vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(60, 40, 20, .25);
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  animation: slideUp .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes slideUp { from { transform: translateY(16%); opacity: .4; } to { transform: none; opacity: 1; } }

@media (min-width: 760px) {
  .sheet-inner {
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    border-radius: 20px;
    bottom: 4vh;
    max-height: 92vh;
    border: 1.5px solid var(--paper-3);
  }
  @keyframes slideUp { from { transform: translateX(-50%) translateY(10%); opacity: .4; } to { transform: translateX(-50%); opacity: 1; } }
}

.sheet-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px;
  background: rgba(243, 233, 211, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--paper-3);
}
.sheet-head h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0;
  color: var(--ink);
}
.sheet-body { padding: 15px; }
.x {
  background: var(--paper-2); border: 1.5px solid var(--ink);
  color: var(--ink); width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 0 1.5px 0 var(--ink);
  font-size: 16px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.x:active { transform: translateY(1px); box-shadow: none; }
.grab { width: 38px; height: 4px; background: var(--ink); border-radius: 2px; margin: 8px auto 0; opacity: .85; }

/* full-screen variant, used by the pin detail */
.sheet.full .sheet-inner {
  top: 0; bottom: 0; left: 0; right: 0;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: 0;
  transform: none;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  animation: fadeUp .2s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 760px) {
  .sheet.full .sheet-inner {
    top: 3vh; bottom: 3vh; left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(680px, 94vw);
    border-radius: 20px;
    border: 1.5px solid var(--paper-3);
  }
}

.detail-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 64%, rgba(243, 233, 211, 0) 100%);
}
.detail-bar-actions { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------- pin detail --- */

/* While the full photo is still arriving, the cached thumbnail stands in under
   a light blur, so the modal is never an empty rectangle. */
.detail-img { transition: filter .3s ease; }
.detail-img.loading { filter: blur(7px); }

.detail-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--paper-3);
  background: var(--paper-2);
  box-shadow: var(--shadow-print);
}
.detail-cap {
  font-family: var(--marker);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin: 18px 2px 10px;
}
.detail-cap.blank { font-family: var(--body); font-style: italic; color: var(--ink-3); font-size: 15px; }
.detail-meta { font-size: 13px; color: var(--ink-3); margin: 0 2px 5px; }
.detail-meta a { color: var(--red); font-weight: 600; }

/* ------------------------------------------------------- create sheet --- */

.create-inner { background: var(--paper); }

.create-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 14px 4px;
}
.create-head h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0;
  color: var(--ink);
}
.create-head .spacer { width: 40px; flex: 0 0 auto; }

.create-tiles {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 22px 16px 4px;
  flex-wrap: wrap;
}
.tile {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tile-box {
  width: 104px; height: 104px;
  border-radius: 18px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  box-shadow: var(--press);
  display: grid;
  place-items: center;
  transition: background .15s ease, transform .08s ease, box-shadow .08s ease;
}
.tile-box svg { width: 36px; height: 36px; color: var(--ink); }
.tile:active .tile-box { transform: translateY(1px); box-shadow: var(--press-down); background: var(--paper-3); }
@media (hover: hover) { .tile:hover .tile-box { background: var(--paper-3); } }
.tile:focus-visible .tile-box { outline: 3px solid var(--mustard); outline-offset: 3px; }

.create-note {
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  padding: 18px 28px 4px;
  margin: 0;
}

/* ----------------------------------------------------------------- map --- */

#map, .minimap {
  width: 100%;
  border-radius: var(--radius);
  border: 1.5px solid var(--paper-3);
  background: var(--paper-2);
  z-index: 1;
}
#map { height: calc(100dvh - 196px); min-height: 320px; margin: 0 12px; width: calc(100% - 24px); }
.minimap { height: 190px; }

.pin-marker {
  width: 26px; height: 26px;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(60, 40, 20, .45);
}
.leaflet-container { font-family: var(--body); }
.leaflet-popup-content-wrapper {
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 12px;
  box-shadow: 0 2px 0 var(--ink), var(--shadow-soft);
}
.leaflet-popup-tip { background: var(--ink); }
.leaflet-popup-content { margin: 10px 11px; font-size: 13px; }
.leaflet-popup-content img { border-radius: 8px; border: 1px solid var(--paper-3); margin-bottom: 7px; width: 100%; height: 92px; object-fit: cover; }
.leaflet-popup-content .pc { font-weight: 600; line-height: 1.3; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-3); }
.leaflet-control-attribution { background: rgba(243, 233, 211, .85) !important; color: var(--ink-3) !important; font-size: 9.5px !important; }
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar { border: 1.5px solid var(--ink) !important; border-radius: 10px !important; box-shadow: 0 2px 0 var(--ink) !important; overflow: hidden; }
.leaflet-bar a { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--paper-3) !important; }
.leaflet-bar a:hover { background: var(--paper-3) !important; }
.leaflet-bar a.leaflet-disabled { color: var(--ink-3) !important; }
.locate-btn { font-size: 15px !important; line-height: 28px !important; text-align: center; }

/* -------------------------------------------------------------- upload --- */

.drop {
  border: 2px dashed var(--ink-3);
  border-radius: var(--radius);
  padding: 26px 16px;
  text-align: center;
  color: var(--ink-3);
  background: rgba(234, 221, 191, .4);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drop.over, .drop:hover { border-color: var(--red); background: var(--paper-2); }
.drop .big { font-size: 30px; margin-bottom: 8px; }
.drop b { color: var(--ink); display: block; margin-bottom: 3px; font-size: 15px; }
.drop span { font-size: 12.5px; }

.preview-wrap { position: relative; margin-bottom: 14px; }
.preview-wrap img {
  width: 100%; max-height: 42vh; object-fit: contain;
  background: var(--paper-2); border-radius: 12px; border: 1px solid var(--paper-3);
  box-shadow: var(--shadow-print);
}

.locbox {
  background: var(--paper-2);
  border: 1.5px solid var(--paper-3);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.locbox .row { display: flex; align-items: center; gap: 8px; }
.locbox .status { flex: 1 1 auto; }
.locbox .status b { display: block; font-size: 13px; color: var(--ink); }
.locbox .status.found b { color: var(--green); }
.locbox .status.missing b { color: var(--red); }
.locbox .status span { font-size: 11.5px; color: var(--ink-3); }
.locbox .actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }

.progress { height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden; margin-top: 12px; }
.progress i { display: block; height: 100%; background: var(--red); width: 0; transition: width .3s ease; }

/* -------------------------------------------------------------- toasts --- */

#toasts {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 34px);
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  width: min(93vw, 460px);
  pointer-events: none;
}
.toast {
  background: var(--paper-2);
  color: var(--ink);
  border: 1.5px solid var(--paper-3);
  border-left: 4px solid var(--brown);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-soft);
  animation: toastIn .2s ease;
}
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--mustard); }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ========================================================= admin page ==== */

.admin-body { padding: 0 0 40px; }
.admin-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px;
  border-bottom: 1.5px solid var(--paper-3);
  background: rgba(243, 233, 211, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.admin-top .logo { height: 40px; }
.admin-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--mustard); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 3px 9px; line-height: 1.4;
  transform: rotate(2deg);
}
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 15px; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 16px; }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(4, 1fr); } }
/* Each card is the same jump as the pill below it, so it has to look and feel
   pressable: a lifted edge that sinks under the finger. */
.stat {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--paper-2);
  border: 1.5px solid var(--paper-3);
  border-radius: 12px;
  padding: 11px 13px;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--paper-3);
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease, border-color .12s ease;
}
.stat b { font-family: var(--display); font-size: 27px; color: var(--red); font-weight: 400; display: block; line-height: 1.1; }
.stat span { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.stat.warn { border-color: var(--red); background: rgba(196, 48, 43, .06); box-shadow: 0 2px 0 var(--red); }

.stat:active { transform: translateY(2px); box-shadow: 0 0 0 var(--paper-3); }
.stat.warn:active { box-shadow: 0 0 0 var(--red); }
@media (hover: hover) {
  .stat:hover { background: var(--paper-3); }
  .stat.warn:hover { background: rgba(196, 48, 43, .12); }
}
.stat:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* The card for the panel you are already on, matching the selected pill. */
.stat.on { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.stat.on span { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .stat { transition: none; } }

.admin-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 14px; }
.admin-tabs button {
  flex: 0 0 auto;
  background: var(--paper-2); border: 1.5px solid var(--paper-3); color: var(--ink-2);
  padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.admin-tabs button[aria-selected="true"] { background: var(--red); color: var(--paper); border-color: var(--ink); box-shadow: var(--press); }

.arow { background: var(--paper-2); border: 1.5px solid var(--paper-3); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.arow.flagged { border-color: var(--red); }

/* The sheet a Slack link pointed at, so the eye lands on it after the scroll. */
.arow.hit { animation: arow-hit 2.6s ease-out 1; }
@keyframes arow-hit {
  0%, 70% { box-shadow: 0 0 0 3px var(--mustard); background: #F6EBCC; }
  100%    { box-shadow: 0 0 0 3px transparent; background: var(--paper-2); }
}
@media (prefers-reduced-motion: reduce) {
  .arow.hit { animation: none; box-shadow: 0 0 0 3px var(--mustard); }
}
.arow-top { display: flex; gap: 12px; align-items: flex-start; }
.arow-top img.pv {
  width: 116px; height: 116px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--paper-3); background: var(--paper-3); flex: 0 0 auto; cursor: zoom-in;
  box-shadow: var(--shadow-print);
}
/* Stands where the thumbnail was before the sheet came off the site. */
.arow-top .pv.gone {
  width: 116px; height: 116px; border-radius: 9px; flex: 0 0 auto;
  border: 1px dashed var(--paper-3); background: rgba(234, 221, 191, .45);
  display: grid; place-content: center; gap: 4px; text-align: center;
  color: var(--ink-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.arow-top .pv.gone span { font-size: 22px; line-height: 1; }
@media (max-width: 520px) { .arow-top { flex-direction: column; } .arow-top img.pv { width: 100%; height: 190px; } .arow-top .pv.gone { width: 100%; height: 190px; } }
.arow-top .fields { flex: 1 1 auto; min-width: 0; }
.arow .field { margin-bottom: 9px; }
.arow .input { padding: 9px 11px; }
.arow h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--ink); }
.tagline { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1.5px solid var(--paper-3); background: var(--paper); color: var(--ink-2); }
.tag.gold { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
.tag.bad { border-color: var(--red); color: var(--red); }
.tag.ok { border-color: var(--green); color: var(--green); }

.bulk-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--paper-2); border: 1.5px solid var(--paper-3);
  border-radius: 10px; padding: 9px; margin-bottom: 8px;
}
.bulk-row img { width: 54px; height: 54px; object-fit: cover; border-radius: 7px; border: 1px solid var(--paper-3); background: var(--paper-3); flex: 0 0 auto; }
.bulk-row .bmeta { flex: 1 1 auto; min-width: 0; }
.bulk-row .bmeta .nm { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-row .bmeta .st { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.bulk-row .bmeta .st.ok { color: var(--green); }
.bulk-row .bmeta .st.err { color: var(--red); }
.bulk-row .bmeta .st.warn { color: var(--brown); }
.bulk-row input.cap { width: 100%; margin-top: 5px; background: var(--paper-0); border: 1.5px solid var(--paper-3);
  border-radius: 7px; padding: 6px 9px; font-size: 16px; color: var(--ink); outline: none; }
.bulk-row input.cap:focus { border-color: var(--ink); }

/* admin standings list (voting is parked, but the scores can still be read) */
.standing {
  display: flex; align-items: center; gap: 11px;
  background: var(--paper-2); border: 1.5px solid var(--paper-3);
  border-radius: var(--radius); padding: 10px; margin-bottom: 9px;
  position: relative; overflow: hidden; width: 100%; text-align: left; color: inherit;
}
.standing .bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(196, 48, 43, .16), rgba(196, 48, 43, .03));
  z-index: 0;
}
.standing > * { position: relative; z-index: 1; }
.standing .rk { font-family: var(--display); font-size: 25px; color: var(--red); width: 32px; text-align: center; flex: 0 0 auto; line-height: 1; }
.standing .pic { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--paper-3); background: var(--paper-3); flex: 0 0 auto; }
.standing .meta { flex: 1 1 auto; min-width: 0; }
.standing .meta .t { font-size: 13.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.standing .meta .t.blank { color: var(--ink-3); font-style: italic; font-weight: 400; }
.standing .meta .s { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.standing .pts { text-align: right; flex: 0 0 auto; }
.standing .pts b { font-family: var(--display); font-size: 21px; color: var(--ink); font-weight: 400; display: block; line-height: 1.05; }
.standing .pts span { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }

/* ---------------------------------------------------------- analytics -- */

.an-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: space-between; margin-bottom: 14px;
}
.an-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.an-ranges button {
  border: 1.5px solid var(--paper-3); background: var(--paper-2); color: var(--ink-2);
  border-radius: 999px; padding: 7px 13px; font: 700 12.5px/1 var(--body);
  cursor: pointer; white-space: nowrap;
}
.an-ranges button[aria-selected="true"] {
  background: var(--red); color: var(--paper); border-color: var(--ink); box-shadow: var(--press);
}
.an-ranges button:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.an-tools { display: flex; align-items: center; gap: 9px; }
.an-stamp { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
            color: var(--ink-3); font-weight: 700; }

.an-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 12px; }
@media (min-width: 620px) { .an-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .an-tiles { grid-template-columns: repeat(6, 1fr); } }
.an-tile {
  background: var(--paper-2); border: 1.5px solid var(--paper-3); border-radius: var(--radius);
  padding: 11px 12px; text-align: left;
}
.an-tile b { font-family: var(--display); font-size: 25px; color: var(--red); font-weight: 400;
             display: block; line-height: 1.1; }
.an-tile span { display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
                color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.an-tile em { display: block; margin-top: 6px; font-style: normal; }
/* Red is the only accent here. Green is reserved for "that worked" and a busy
   Tuesday is not a success message. */
.an-d { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.an-d.up { color: var(--ink); }
.an-d.down { color: var(--red); }

.an-card {
  background: var(--paper-2); border: 1.5px solid var(--paper-3);
  border-radius: var(--radius); padding: 13px; margin-bottom: 12px;
}
.an-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                justify-content: space-between; margin-bottom: 11px; }
.an-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--ink); }
.an-cols { display: grid; gap: 12px; }
@media (min-width: 760px) {
  .an-cols { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
  .an-cols .an-card { margin-bottom: 0; }
}

.an-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.an-pill {
  border: 1.5px solid var(--paper-3); background: var(--paper-0); color: var(--ink-2);
  border-radius: 999px; padding: 5px 10px; font: 700 11.5px/1 var(--body); cursor: pointer;
}
.an-pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.an-pill:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* The readout is a fixed line rather than a floating tooltip: on a phone there
   is no hover to float under, and a line that never moves is easier to read. */
.an-readout { min-height: 34px; margin-bottom: 9px; }
.an-readout b { display: block; font-size: 14px; color: var(--ink); line-height: 1.25; }
.an-readout span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.an-bars { display: flex; align-items: flex-end; gap: 2px; height: 132px; }
.an-bar {
  flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none;
  display: flex; align-items: flex-end; cursor: pointer; border-radius: 3px;
}
.an-bar i { display: block; width: 100%; background: var(--red); border-radius: 3px 3px 0 0;
            min-height: 0; transition: background .12s ease; }
.an-bar.on i, .an-bar:focus-visible i { background: var(--ink); }
/* The column tints as well as the bar, so an hour with nothing in it still
   shows that it is the one being read out. */
.an-bar.on { background: rgba(28, 23, 18, .07); }
.an-bar:focus-visible { outline: 2px solid var(--mustard); outline-offset: 1px; }
@media (hover: hover) { .an-bar:hover i { background: var(--ink); } }
.an-axis { display: flex; gap: 2px; margin-top: 6px; }
/* Labelled cells are allowed to spill sideways: only every few ticks carries
   text, so it runs out over its blank neighbours instead of being clipped to
   one character, which is what a 28-bar day did. */
.an-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 9.5px;
                color: var(--ink-3); font-weight: 700; letter-spacing: .04em;
                overflow: visible; white-space: nowrap; }

.an-row {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 3px;
}
.an-fill { position: absolute; inset: 0 auto 0 0; background: rgba(196, 48, 43, .16);
           border-radius: var(--radius-sm); z-index: 0; }
.an-row > .an-lab, .an-row > .an-n { position: relative; z-index: 1; }
.an-lab { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-lab em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
.an-n { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ink-2); }

.an-more { margin-top: 9px; }
.an-more summary { font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--ink-3); cursor: pointer; padding: 4px 0; }
.an-more summary:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.an-list { list-style: none; margin: 6px 0 0; padding: 0; }
.an-list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
              font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--paper-3); }
.an-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-list li b { flex: 0 0 auto; color: var(--ink); }
.an-hint { margin: 9px 2px 0; line-height: 1.45; }
.an-foot { margin: 4px 2px 0; line-height: 1.5; }
.an-foot a { color: var(--red); font-weight: 700; }

.an-odds { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 11px;
           border-top: 1px solid var(--paper-3); padding-top: 10px; }
.an-odds span { font-size: 11px; color: var(--ink-3); font-weight: 700;
                letter-spacing: .05em; text-transform: uppercase; }
.an-odds b { font-family: var(--display); font-weight: 400; font-size: 16px;
             color: var(--ink); display: block; letter-spacing: 0; text-transform: none; }

.an-sheets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 620px) { .an-sheets { grid-template-columns: repeat(8, 1fr); } }
.an-sheet { padding: 0; border: 0; background: none; cursor: pointer; text-align: center; }
.an-sheet img, .an-gone {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--pin-radius);
  border: 1.5px solid var(--ink); background: var(--paper-3); display: block;
}
.an-gone { display: grid; place-items: center; font-size: 19px; color: var(--ink-3); }
.an-sheet span { display: block; margin-top: 5px; font-size: 10px; color: var(--ink-3);
                 font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
.an-sheet span b { display: block; font-family: var(--display); font-weight: 400;
                   font-size: 15px; color: var(--red); letter-spacing: 0; }
.an-sheet:active img { transform: translateY(1px); }
.an-sheet:focus-visible img, .an-sheet:focus-visible .an-gone {
  outline: 3px solid var(--mustard); outline-offset: 2px;
}

.an-note { background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: var(--radius);
           padding: 15px; box-shadow: var(--press); }
.an-note h3 { margin: 0 0 7px; font-family: var(--display); font-weight: 400; font-size: 19px; }
.an-note p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.an-note a { color: var(--red); font-weight: 700; }
.an-steps { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.an-steps code { background: var(--paper-0); border: 1px solid var(--paper-3); border-radius: 5px;
                 padding: 1px 5px; font-size: 12px; word-break: break-all; }

.login-card {
  max-width: 380px; margin: 10vh auto 0; padding: 24px 22px;
  background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--ink), var(--shadow-soft);
}
.login-card h2 { font-family: var(--display); font-weight: 400; margin: 0 0 4px; font-size: 28px; color: var(--ink); }
.login-card p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 16px; }
.login-card p.tiny { margin: 20px 0 0; }
.login-card p.tiny + p.tiny { margin-top: 11px; }   /* the way back out */

.hint { color: var(--ink-2); font-size: 13.5px; margin: 0 2px 14px; line-height: 1.5; }
.hint strong { color: var(--ink); font-weight: 700; }

.muted { color: var(--ink-3); }
.tiny { font-size: 11.5px; }
.center { text-align: center; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.warn-text { color: var(--red); font-weight: 600; }


/* --------------------------------------------------------- typeahead ----- */
/* The street list under "where's it hanging?". It floats over the form, so the
   sheet does not jump every time a suggestion appears or goes. */

.typeahead { position: relative; }

.ta-list {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  top: 100%;
  margin: 5px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 232px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper-0);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(28, 23, 18, .22);
}
.ta-list li {
  padding: 12px 12px;
  min-height: 44px;               /* a thumb, not a mouse */
  display: flex;
  align-items: center;
  border-radius: 8px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ta-list li + li { border-top: 1px solid var(--paper-2); }
.ta-list li.on, .ta-list li:active { background: var(--red); color: var(--paper); border-top-color: transparent; }
@media (hover: hover) { .ta-list li:hover { background: var(--paper-2); } }
.ta-list li.on:hover { background: var(--red); }

/* A location that came from a street name, not from the photo or a dropped pin. */
.detail-meta .approx {
  font-size: .85em;
  font-style: italic;
  color: var(--ink-3);
}