/* =========================================================================
   Rock Creek Hunting Club — site design
   Concept: the camp pinout board. Members "hang a tag" on a numbered peg
   for the stand they are hunting. Everything else stays quiet and dark
   (easy on the eyes before sunrise) so the map and the board carry the page.

   The MAP is not styled here. .rc-mapslot only reserves the space; the
   existing map mounts inside it unchanged, with its own markers, legend and tools.

   rc-*   real UI, keep
   mock-* design-review helpers, remove on integration
   ========================================================================= */

:root {
  /* Material palette */
  --bark:      #231E19;  /* page */
  --bark-deep: #1A1612;  /* masthead */
  --bark-lift: #2C2620;  /* raised surfaces: rows, inputs, panels */
  --bark-line: #423A31;  /* dividers */
  --bone:      #ECE4D2;  /* text, logo (13:1 on bark) */
  --stone:     #A89F8F;  /* secondary text (6.3:1 on bark) */
  --moss:      #3A4A2B;  /* pegboard */
  --moss-deep: #2C3920;
  --brass:     #C9A04B;  /* other members' tags */
  --brass-lo:  #A9822F;
  --blaze:     #FF6B1A;  /* you, active, focus (5.8:1 on bark) */
  --blaze-lo:  #E2560B;

  --f-sign: "Bahnschrift", "DIN Condensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow",
            "DejaVu Sans Condensed", sans-serif-condensed, system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --mast-h: 68px;
  --ring: 0 0 0 2px var(--bark-deep), 0 0 0 5px var(--blaze);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bark); color: var(--bone); font: 400 16px/1.55 var(--f-body); }
img, svg { display: block; max-width: 100%; }
a { color: var(--bone); text-decoration-color: var(--blaze); text-underline-offset: 3px; text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--f-sign); font-weight: 700; line-height: 1.1; letter-spacing: .005em; }
button { font: inherit; color: inherit; }

/* One focus treatment: dark gap + blaze ring, readable on every surface */
:focus { outline: none; }
:focus-visible { box-shadow: var(--ring); border-radius: 6px; }

.rc-skip { position: absolute; left: 8px; top: -80px; z-index: 99; background: var(--bone); color: var(--bark); padding: 8px 14px; border-radius: 6px; font-weight: 700; }
.rc-skip:focus-visible { top: 8px; }
.rc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rc-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   MASTHEAD
   ========================================================================= */
.rc-mast { position: sticky; top: 0; z-index: 40; background: var(--bark-deep); border-bottom: 1px solid var(--bark-line); }
.rc-mast__in {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav acct";
  align-items: stretch; height: var(--mast-h); padding: 0 var(--s5) 0 var(--s4); gap: var(--s6);
}
.rc-brand { grid-area: brand; display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.rc-brand img { height: 52px; width: auto; }
.rc-brand span { display: grid; line-height: 1; }
.rc-brand b { font: 700 22px/1 var(--f-sign); letter-spacing: .01em; }
.rc-brand small { font-size: 13px; color: var(--stone); margin-top: 3px; }

.rc-nav { grid-area: nav; display: flex; gap: var(--s2); align-items: stretch; }
.rc-nav a {
  position: relative; display: flex; align-items: center; padding: 0 var(--s4);
  font: 600 18px/1 var(--f-sign); letter-spacing: .01em; color: var(--stone); text-decoration: none;
}
.rc-nav a:hover { color: var(--bone); }
.rc-nav a[aria-current="page"] { color: var(--bone); }
.rc-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: 0; height: 4px; background: var(--blaze);
}
.rc-nav a:focus-visible { box-shadow: inset 0 0 0 3px var(--blaze); border-radius: 4px; }

.rc-acct { grid-area: acct; display: flex; align-items: center; gap: var(--s2); position: relative; }
.rc-acct__btn {
  display: inline-flex; align-items: center; gap: var(--s2); height: 42px; padding: 0 var(--s3);
  background: transparent; border: 1px solid var(--bark-line); border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--bone);
}
.rc-acct__btn:hover { border-color: var(--stone); }
.rc-acct__btn--admin { color: var(--stone); }   /* slot for the existing admin control */
.rc-acct__btn--me { padding-left: 5px; }
.rc-acct__btn--signin { background: var(--bone); color: var(--bark); border-color: var(--bone); }
.rc-mono {  /* member initials, also used on tags */
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px;
  background: var(--blaze); color: var(--bark); font: 700 14px/1 var(--f-sign);
}
.rc-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 6px;
  background: var(--bark-lift); border: 1px solid var(--bark-line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.rc-menu[hidden] { display: none; }
.rc-menu p { margin: 0; padding: 8px 10px 10px; border-bottom: 1px solid var(--bark-line); margin-bottom: 4px; font-size: 14px; color: var(--stone); }
.rc-menu p b { display: block; color: var(--bone); font-size: 15px; }
.rc-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 6px; text-decoration: none; font-size: 15px; }
.rc-menu a:hover { background: var(--bark); }

/* =========================================================================
   BUTTONS & FIELDS
   ========================================================================= */
.rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5); border-radius: 8px; border: 0; cursor: pointer;
  font: 700 18px/1 var(--f-sign); letter-spacing: .01em; text-decoration: none;
}
.rc-btn--go   { background: var(--blaze); color: var(--bark); }
.rc-btn--go:hover { background: #FF7E36; }
.rc-btn--go:disabled { background: var(--bark-lift); color: var(--stone); cursor: not-allowed; }
.rc-btn--line { background: transparent; color: var(--bone); border: 1.5px solid var(--stone); }
.rc-btn--line:hover { border-color: var(--bone); }
.rc-btn--wide { width: 100%; min-height: 56px; font-size: 20px; }

.rc-field { display: grid; gap: 6px; }
.rc-field label { font-size: 14px; font-weight: 600; color: var(--stone); }
.rc-input {
  width: 100%; min-height: 48px; padding: 0 var(--s3); border-radius: 8px;
  background: var(--bark-lift); color: var(--bone); border: 1.5px solid var(--bark-line);
  font: 400 16px/1.2 var(--f-body);
}
.rc-input::placeholder { color: #857C6E; }
.rc-input:focus-visible { border-color: var(--blaze); }

/* =========================================================================
   PINOUT BOARD
   ========================================================================= */
.rc-pinout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: calc(100dvh - var(--mast-h)); }

/* Reserved space for the EXISTING map. Nothing inside is styled by this sheet. */
.rc-mapslot { position: relative; min-width: 0; overflow: hidden; background: #2E2A24; }
.mock-mapnote {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; padding: var(--s5);
  background: repeating-linear-gradient(135deg, #2E2A24 0 14px, #29251F 14px 28px);
  color: var(--stone); font-size: 15px;
}
.mock-mapnote b { font: 700 24px/1.1 var(--f-sign); color: var(--bone); }
button.mock-mapnote { width: 100%; border: 0; cursor: pointer; font: inherit; color: var(--stone); }
.mock-mapnote span { margin-top: 10px; font-size: 13px; color: #B9AEE8; }
.mock-pdf { position: absolute; inset: 0; display: grid; justify-content: center; align-content: start; gap: 18px; padding: 28px; overflow: hidden; }
.mock-pdf__page {
  width: min(620px, 70vw); aspect-ratio: 8.5 / 11; background: #F4F1EA; border-radius: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.4);
  background-image: linear-gradient(#CFC8BA, #CFC8BA), repeating-linear-gradient(transparent 0 22px, #DDD7CB 22px 30px);
  background-size: 50% 18px, calc(100% - 120px) calc(100% - 180px); background-position: 60px 64px, 60px 120px; background-repeat: no-repeat;
}
.mock-pdf__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 16px; border-radius: 8px; background: #3A2F5C; color: #E7E0FF; font-weight: 600; }

.rc-side { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); overflow-y: auto; border-left: 1px solid var(--bark-line); }
.rc-side__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.rc-side__head h1 { font-size: 26px; }
.rc-side__head p { margin: 0; color: var(--stone); font-size: 14px; font-variant-numeric: tabular-nums; }

/* The board: moss pegboard in a wood frame */
.rc-board {
  --hole: radial-gradient(circle, rgba(10,14,6,.55) 0 2.2px, transparent 2.8px);
  background: var(--hole) 9px 9px / 18px 18px, linear-gradient(180deg, var(--moss), var(--moss-deep));
  border: 7px solid #5B4630; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 6px 18px rgba(0,0,0,.35);
  padding: var(--s3) var(--s2) var(--s2);
}
.rc-board ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s1); }

.rc-peg {
  position: relative; display: grid; justify-items: center; align-content: start;
  height: 138px; width: 100%; padding: 6px 0 0; border: 0; background: none; border-radius: 6px;
}
.rc-peg__no { font: 700 22px/1 var(--f-sign); color: rgba(236,228,210,.82); font-variant-numeric: tabular-nums; }
.rc-peg__nail {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 7px;
  background: radial-gradient(circle at 35% 35%, #E9E4DA, #8C877E 60%, #5E5A53);
  box-shadow: 0 2px 2px rgba(0,0,0,.55);
}
.rc-peg__open { margin-top: 14px; font-size: 13px; color: rgba(236,228,210,.6); }

/* A tag hung on the nail */
.rc-tag {
  position: relative; margin-top: -3px; display: grid; justify-items: center;
  transform-origin: 50% -6px;
}
.rc-tag::before { /* string */ content: ""; width: 2px; height: 12px; background: rgba(236,228,210,.75); }
.rc-tag__body {
  width: 72px; padding: 14px 4px 8px; text-align: center; color: var(--bark);
  background: linear-gradient(170deg, #D9B35E, var(--brass) 45%, var(--brass-lo));
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  border-radius: 0 0 5px 5px; position: relative;
}
.rc-tag__body::before { /* punched hole */
  content: ""; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--moss-deep); box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
}
.rc-tag__who { display: block; font: 700 24px/1 var(--f-sign); letter-spacing: .02em; }
.rc-tag__time { display: block; margin-top: 4px; font: 600 12px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.rc-tag--you .rc-tag__body { background: linear-gradient(170deg, #FF8A45, var(--blaze) 45%, var(--blaze-lo)); }
.rc-tag--ghost .rc-tag__body {
  background: none; color: var(--blaze); clip-path: none; border: 2px dashed var(--blaze); border-radius: 6px; padding: 10px 4px 8px;
}
.rc-tag--ghost .rc-tag__body::before { display: none; }
.rc-tag--ghost::before { background: var(--blaze); }
.rc-peg.is-picked { background: rgba(255,107,26,.12); box-shadow: inset 0 0 0 2px rgba(255,107,26,.55); }

@media (prefers-reduced-motion: no-preference) {
  .rc-tag--hung { animation: rc-swing 900ms cubic-bezier(.3,.7,.3,1); }
  @keyframes rc-swing { 0% { transform: rotate(-16deg); } 35% { transform: rotate(9deg); } 65% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
}

/* Action sits right under the map/title, above the board, so it's in reach right after tapping the map */
.rc-action { display: grid; gap: var(--s2); order: 1; }
.rc-board { order: 2; }
.rc-out { order: 3; }
.rc-action p { margin: 0; color: var(--stone); font-size: 15px; }
.rc-action p b { color: var(--bone); }
.rc-pinout[data-state="in"] .rc-action--out, .rc-pinout[data-state="out"] .rc-action--in { display: none; }

/* Who's out — the same information as the board, as a readable list */
.rc-out h2 { font-size: 19px; margin-bottom: var(--s2); }
.rc-out ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bark-line); }
.rc-out li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: 10px 2px; border-bottom: 1px solid var(--bark-line); font-variant-numeric: tabular-nums; }
.rc-out li span:last-child { color: var(--stone); font-size: 15px; }
.rc-out li.is-you span:first-child { color: var(--blaze); font-weight: 700; }

/* =========================================================================
   CONTENT PAGES
   ========================================================================= */
.rc-page { max-width: 1080px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s7); }
.rc-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s4); padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--bark-line); }
.rc-title h1 { font-size: 46px; }
.rc-title p { margin: var(--s2) 0 0; color: var(--stone); max-width: 58ch; font-size: 17px; }
.rc-foot { padding: var(--s5); text-align: center; color: var(--stone); font-size: 14px; border-top: 1px solid var(--bark-line); }

/* Rules = the club's PDF */
.rc-page--wide { max-width: 1180px; }
.rc-title__acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rc-pdf {
  position: relative; height: max(560px, calc(100dvh - var(--mast-h) - 260px));
  background: #3A352E; border: 1px solid var(--bark-line); border-radius: 10px; overflow: hidden;
}
.rc-pdf object, .rc-pdf iframe { width: 100%; height: 100%; border: 0; display: block; }
.rc-pdfcard { display: none; }
.rc-pdfcard__dl { display: none; }
.rc-pdfcard__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px;
  background: var(--moss); color: var(--bone);
}
.rc-pdfcard__icon .rc-ico { width: 28px; height: 28px; }
[data-pdf="no"] .rc-has-pdf, [data-pdf="yes"] .rc-no-pdf { display: none !important; }

/* Harvest Record */
.rc-filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-bottom: var(--s5); }
.rc-filters .rc-field { flex: 0 1 190px; }
.rc-filters .rc-field--grow { flex: 1 1 240px; }
.rc-log { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rc-log th { text-align: left; font: 600 14px/1.2 var(--f-body); color: var(--stone); padding: 0 var(--s3) var(--s3); border-bottom: 2px solid var(--bark-line); }
.rc-log td { padding: var(--s4) var(--s3); border-bottom: 1px solid var(--bark-line); vertical-align: top; }
.rc-log tbody tr:hover { background: var(--bark-lift); }
.rc-log .rc-sp { font: 700 19px/1.2 var(--f-sign); }
.rc-log .rc-det { color: var(--stone); }
.rc-log .rc-where { display: inline-block; padding: 3px 9px; border-radius: 5px; background: var(--moss); font-size: 14px; font-weight: 600; }
.rc-log .rc-sort { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--bone); }
.rc-log .rc-sort:focus-visible { box-shadow: var(--ring); border-radius: 4px; }
.rc-count { color: var(--stone); font-size: 15px; margin: 0 0 var(--s3); }

.rc-empty { display: grid; justify-items: center; text-align: center; gap: var(--s3); padding: var(--s7) var(--s5); border: 1.5px dashed var(--bark-line); border-radius: 12px; }
.rc-empty h2 { font-size: 28px; }
.rc-empty p { margin: 0 0 var(--s3); color: var(--stone); max-width: 40ch; }
.rc-empty .rc-tag { transform: rotate(-6deg); margin-bottom: var(--s2); }
.rc-empty .rc-tag__body { background: none; border: 2px dashed var(--stone); clip-path: none; border-radius: 6px; color: var(--stone); }
.rc-empty .rc-tag__body::before { display: none; }
.rc-empty .rc-tag::before { background: var(--stone); }
[data-view="empty"] .rc-full, [data-view="full"] .rc-empty { display: none; }

/* Sign in */
.rc-signin { min-height: calc(100dvh - var(--mast-h)); display: grid; place-items: center; padding: var(--s6) var(--s4); }
.rc-signin__box { width: min(400px, 100%); display: grid; gap: var(--s5); }
.rc-signin__box img { width: 230px; margin: 0 auto; }
.rc-signin__box h1 { font-size: 34px; text-align: center; }
.rc-signin__box > p { margin: -12px 0 0; text-align: center; color: var(--stone); }
.rc-signin__box form { display: grid; gap: var(--s4); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .rc-pinout { grid-template-columns: minmax(0, 1fr) 360px; }
  .rc-acct__btn--me .rc-acct__name { display: none; }
  .rc-mast__in { gap: var(--s4); }
}
@media (max-width: 780px) {
  :root { --mast-h: 112px; }
  .rc-mast__in {
    grid-template-columns: 1fr auto; grid-template-areas: "brand acct" "nav nav"; grid-template-rows: 60px 52px;
    height: auto; padding: 0; gap: 0;
  }
  .rc-brand { padding-left: var(--s3); }
  .rc-brand img { height: 44px; }
  .rc-brand b { font-size: 20px; }
  .rc-acct { padding-right: var(--s3); }
  .rc-acct__btn--admin span, .rc-acct__btn--me .rc-acct__name, .rc-acct__btn--me .rc-ico { display: none; }
  .rc-acct__btn--admin { width: 44px; padding: 0; justify-content: center; }
  .rc-acct__btn--me { border: 0; padding: 0 4px; }
  .rc-mono { width: 36px; height: 36px; }
  .rc-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--bark-line); }
  .rc-nav a { justify-content: center; padding: 0 2px; font-size: 15px; white-space: nowrap; }
  .rc-nav a[aria-current="page"]::after { left: 18%; right: 18%; }
  .rc-mast--out .rc-mast__in { grid-template-rows: 60px; grid-template-areas: "brand acct"; }
  .rc-mast--out + .rc-signin { min-height: calc(100dvh - 60px); }

  .rc-pinout { display: block; height: auto; }
  .rc-mapslot { height: 56dvh; min-height: 320px; max-height: 540px; }
  .rc-side { border-left: 0; padding: var(--s4) var(--s3) var(--s6); overflow: visible; }
  .rc-board ol { grid-template-columns: repeat(4, 1fr); }
  .rc-peg { height: 128px; }
  .rc-tag__body { width: 64px; }

  .rc-page { padding: var(--s5) var(--s3) var(--s6); }
  .rc-title h1 { font-size: 36px; }
  .rc-title .rc-btn { width: 100%; }
  .rc-title__acts { display: none; }
  .rc-pdf { display: none; }
  .rc-pdfcard {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center;
    padding: var(--s5) var(--s4); background: var(--bark-lift); border: 1px solid var(--bark-line); border-radius: 12px; text-decoration: none;
  }
  .rc-pdfcard__txt { display: grid; gap: 2px; }
  .rc-pdfcard__txt b { font: 700 22px/1.1 var(--f-sign); }
  .rc-pdfcard__txt span { color: var(--stone); font-size: 15px; }
  .rc-pdfcard .rc-btn { grid-column: 1 / -1; }
  .rc-pdfcard__dl { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; margin-top: var(--s2); color: var(--stone); font-weight: 600; }

  .rc-filters .rc-field { flex: 1 1 140px; }
  .rc-filters .rc-field--grow { flex-basis: 100%; }
  .rc-log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rc-log, .rc-log tbody { display: block; }
  .rc-log tr {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "sp when" "det det" "who where" "note note";
    gap: 4px var(--s3); padding: var(--s4) 2px; border-bottom: 1px solid var(--bark-line);
  }
  .rc-log td { padding: 0; border: 0; }
  .rc-log td[data-c="when"]  { grid-area: when; color: var(--stone); font-size: 15px; text-align: right; }
  .rc-log td[data-c="sp"]    { grid-area: sp; }
  .rc-log td[data-c="det"]   { grid-area: det; }
  .rc-log td[data-c="who"]   { grid-area: who; margin-top: 6px; }
  .rc-log td[data-c="where"] { grid-area: where; margin-top: 6px; text-align: right; }
  .rc-log td[data-c="note"]  { grid-area: note; color: var(--stone); font-size: 15px; }
  .rc-log td[data-c="note"]:empty { display: none; }
}

/* =========================================================================
   MOCKUP-ONLY (remove)
   ========================================================================= */
.mock-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px var(--s4); background: #3A2F5C; color: #E7E0FF; font: 600 13px/1.2 var(--f-body); }
.mock-bar button, .mock-bar a { font: 600 13px/1 var(--f-body); color: #E7E0FF; background: transparent; border: 1px solid #9C8BE0; border-radius: 999px; padding: 6px 10px; cursor: pointer; text-decoration: none; }
.mock-bar [aria-pressed="true"] { background: #E7E0FF; color: #3A2F5C; }
.mock-note { border: 1px dashed #9C8BE0; color: #D9D0FF; background: rgba(58,47,92,.35); border-radius: 8px; padding: 8px 12px; font-size: 14px; margin-bottom: var(--s5); }