@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(assets/fonts/poppins-400-v1.woff2) format("woff2");
}
@font-face  {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(assets/fonts/poppins-500-v1.woff2) format("woff2");
}
@font-face  {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(assets/fonts/poppins-600-v1.woff2) format("woff2");
}
@font-face  {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(assets/fonts/poppins-700-v1.woff2) format("woff2");
}
:root {
  --ink: #153452;
  --muted: #516a82;
  --primary: #076bb8;
  --paper: #edf5fc;
  --soft: #e1effc;
  --line: #cddfee;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.6 Poppins,Arial,sans-serif;
}
a {
  color: inherit;
  text-underline-offset: 3px;
}
button,input,select {
  font: inherit;
}
button,a.button {
  cursor: pointer;
}
button,input,select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline: 3px solid #1687dd;
  outline-offset: 3px;
}
h1,h2,h3 {
  font-family: Poppins,Arial,sans-serif;
  line-height: 1.25;
  letter-spacing: -.025em;
}
h1 {
  font-size: 32px;
  margin: 12px 0 16px;
}
h2 {
  font-size: 20px;
  margin: 0 0 16px;
}
h3 {
  font-size: 15px;
  margin: 22px 0 10px;
}
p {
  margin: 0 0 16px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-weight: 700;
}
.button.secondary {
  background: white;
  color: var(--primary);
  border-color: var(--line);
}
.button:hover {
  filter: brightness(.95);
}
#app {
  display: grid;
  grid-template-columns: 224px minmax(0,1fr);
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}
.site-header {
  grid-column: 1;
  grid-row: 1/3;
  background: #084b88;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.brand {
  display: block;
  background: white;
  padding: 12px;
  border-radius: 8px;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
}
.site-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 25px 0;
}
.site-nav a {
  padding: 11px 13px;
  font-size: 14px;
  color: #e5f3ff;
  text-decoration: none;
  border-radius: 6px;
}
.site-nav a[aria-current=page] {
  background: #2079c6;
  color: white;
}
.site-nav a:hover {
  background: #1261a7;
}
.site-nav .add-only {
  margin-top: 15px;
  background: white;
  color: #06477e;
  font-weight: 700;
}
.site-nav .add-only:hover {
  background: #dcedfc;
}
.site-nav .logout {
  margin-top: 14px;
  font-size: 12px;
}
.tins-link {
  margin-top: auto;
  color: #d4e8fb;
  font-size: 11px;
  padding: 23px 10px 8px;
  border-top: 1px solid #3876ad;
  text-decoration: none;
}
.mobile-toggle {
  display: none;
}
.page {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 34px 36px;
  min-width: 0;
}
.site-footer {
  grid-column: 2;
  grid-row: 2;
  padding: 20px 34px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.hero {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(260px,1fr);
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.hero-copy {
  padding: 25px 30px;
  align-self: center;
}
.hero-copy>p:not(.eyebrow) {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 0;
  max-width: 570px;
}
.hero h1 {
  font-size: clamp(26px,2.5vw,36px);
  margin: 10px 0 14px;
}
.hero-visual {
  position: relative;
  overflow: hidden;
}
.hero-visual img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-position: center 66%;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 12px;
  margin: 22px 0 26px;
}
.stat {
  padding: 0 18px;
  border-right: 1px solid var(--line);
}
.stat:last-child {
  border: 0;
}
.stat strong {
  display: block;
  font-size: 29px;
  line-height: 1.35;
  color: #0868b2;
}
.stat span {
  font-size: 12px;
  color: var(--muted);
}
.home-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}
.tip-panel {
  background: #deeffe;
  border-color: #a7cdef;
  padding: 27px;
}
.tip-panel .eyebrow {
  color: #095b9b;
}
.tip-copy {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.rank-row strong:last-child {
  margin-left: auto;
}
.rank-number {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
}
.public-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}
.login-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.login-panel h2 {
  margin-bottom: 0;
}
.login-panel>a:not(.button) {
  font-size: 13px;
}
.target-section,.public-details,.partners {
  margin-top: 24px;
}
.target-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.target-grid figure {
  margin: 0;
  text-align: center;
}
.target-grid img {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 210px;
  height: 140px;
  object-fit: cover;
  border-radius: 7px;
}
.target-grid figcaption {
  margin-top: 10px;
  font-weight: 700;
}
.target-section>p {
  max-width: 850px;
  margin-bottom: 0;
}
.public-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.stack {
  display: grid;
  gap: 24px;
}
.prize-winners {
  margin: 0;
}
.prize-winners dt {
  font-weight: 700;
  margin-top: 17px;
}
.prize-winners dd {
  margin: 4px 0 0;
  color: var(--muted);
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  align-items: center;
  gap: 30px;
  padding: 15px 0;
}
.partner-grid img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  margin: auto;
}
.partner-grid img:first-child {
  max-height: 160px;
}
.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 10px 0 24px;
}
.page-heading h1 {
  color: #075b9e;
  margin: 0 0 8px;
}
.page-heading p {
  margin: 0;
  color: var(--muted);
}
.filters {
  display: flex;
  align-items: end;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.filters label:first-child {
  flex: 1;
  min-width: 170px;
}
.filters input {
  width: 100%;
}
.data-wrap {
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}
th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 13px 18px;
  background: var(--soft);
  color: var(--muted);
}
td {
  padding: 15px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
td:first-child {
  font-weight: 700;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.resource-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 15px 0;
  font-size: 14px;
}
.resource-link:hover {
  color: var(--primary);
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#observation-search label {
  display: block;
  margin-bottom: 10px;
}
#observation-results {
  margin-top: 18px;
}
.skip {
  position: absolute;
  top: -100px;
}
.skip:focus {
  top: 0;
  z-index: 10;
  background: white;
  padding: 15px;
}
dialog {
  width: min(850px,94vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: white;
}
dialog[open] {
  display: flex;
  flex-direction: column;
}
dialog::backdrop {
  background: #05233dbd;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.modal-header h2 {
  margin: 0;
  font-size: 21px;
}
.modal-header button {
  font-size: 25px;
  line-height: 1;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
}
#modal-content {
  overflow: auto;
  padding: 25px 30px;
  font-size: 14px;
  line-height: 1.8;
}
#modal-content li {
  margin-bottom: 12px;
}
#modal-content img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}
#modal-content a {
  color: var(--primary);
}
#modal-content table {
  width: auto;
}
#modal-content td {
  padding: 4px 12px 4px 0;
  border: 0;
  font-size: 14px;
  font-weight: 400;
}
#modal-content .boundary-map {
  display: block;
  width: 100%;
  margin-top: 20px;
}
@media (min-width:1800px) {
  .hero-copy {
    padding: 30px 36px;
  }
  .hero {
    grid-template-columns: 1.3fr 1fr;
  }
}
@media (max-width:1100px) {
  #app {
    grid-template-columns: 200px minmax(0,1fr);
  }
  .page {
    padding: 24px;
  }
  .hero-copy {
    padding: 22px;
  }
  .hero h1 {
    font-size: 28px;
  }
  .hero {
    grid-template-columns: 1.2fr 1fr;
  }
  .home-grid,.public-details {
    grid-template-columns: 1fr;
  }
  .resource-grid {
    grid-template-columns: 1fr;
  }
  .public-grid {
    grid-template-columns: 1.3fr 1fr;
  }
  .target-grid img {
    height: 110px;
  }
}
@media (max-width:760px) {
  #app {
    min-height: 100vh;
  }
  .site-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .brand {
    width: 160px;
    padding: 9px;
  }
  .mobile-toggle {
    display: block;
    margin-left: auto;
    min-height: 42px;
  }
  .site-nav {
    display: none;
    flex-basis: 100%;
    margin: 12px 0 0;
  }
  .site-nav.open {
    display: flex;
  }
  .tins-link {
    display: none;
  }
  .page {
    padding: 20px 16px 28px;
    margin: 0;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    grid-row: 1;
    min-height: 190px;
  }
  .hero-visual img {
    object-position: center 65%;
  }
  .hero-copy {
    padding: 23px;
  }
  .hero h1 {
    font-size: 29px;
  }
  .stats {
    padding: 14px 3px;
  }
  .stat {
    padding: 0 9px;
  }
  .stat strong {
    font-size: 24px;
  }
  .stat span {
    font-size: 11px;
    display: block;
  }
  .home-grid,.public-grid,.public-details {
    grid-template-columns: 1fr;
  }
  .login-panel {
    grid-row: 1;
  }
  .target-grid {
    gap: 10px;
  }
  .target-grid img {
    height: 90px;
  }
  .target-grid figcaption {
    font-size: 12px;
  }
  .panel {
    padding: 21px;
  }
  .target-section h2 {
    font-size: 19px;
  }
  .partner-grid {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer {
    padding: 20px;
  }
  .page-heading {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }
  .filters label:first-child {
    flex-basis: 100%;
  }
  .data-wrap {
    background: transparent;
    border: 0;
  }
  table.responsive thead {
    display: none;
  }
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td {
    display: block;
  }
  table.responsive tr {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 16px;
    margin-bottom: 11px;
  }
  table.responsive td {
    border: 0;
    padding: 7px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  table.responsive td:first-child {
    display: block;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    margin-bottom: 4px;
  }
  table.responsive td:not(:first-child):before {
    content: attr(data-label);
    font-size: 12px;
    color: var(--muted);
  }
  dialog {
    max-height: 90vh;
  }
  .modal-header {
    padding: 16px 18px;
  }
  .modal-header h2 {
    font-size: 18px;
  }
  #modal-content {
    padding: 20px;
  }
  .actions input {
    max-width: 100%;
  }
}
/* Account-aware layout and shared dialog styling. */
#app {
  grid-template-columns: 260px minmax(0,1fr);
  grid-template-rows: auto 1fr auto;
}
.site-header {
  grid-row: 1/4;
  padding: 26px 22px;
}
.site-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.site-nav .add-only {
  justify-content: flex-start;
}
.workspace-header {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 34px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.workspace-header h1 {
  font-size: 23px;
  color: #075b9e;
}
.account-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.account-button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
.account-name {
  font-size: 13px;
  font-weight: 600;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.initials {
  display: grid;
  place-items: center;
  background: #dceeff;
  color: #075b9e;
  font-weight: 700;
  font-size: 12px;
}
.logout-button {
  font-size: 12px;
  background: white;
  padding: 8px 12px;
}
.header-year {
  color: var(--muted);
  font-size: 13px;
}
.page {
  grid-row: 2;
}
.site-footer {
  grid-row: 3;
}
.hero {
  grid-template-columns: minmax(0,1fr) 310px;
  min-height: 248px;
}
.hero-visual {
  min-height: 248px;
}
.hero-visual img {
  object-fit: cover;
  object-position: center 58%;
}
.hero-copy {
  padding: 24px 30px;
}
.hero-copy>p:not(.eyebrow) {
  max-width: 680px;
}
.tip-trigger {
  background: #e0effc;
  color: #075b9e;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 13px;
  margin-top: 18px;
  border-color: #bedbf0;
}
.home-grid {
  grid-template-columns: minmax(0,1.4fr) minmax(260px,.8fr);
}
.login-panel form {
  display: grid;
  gap: 9px;
}
.login-panel input {
  width: 100%;
  min-width: 0;
}
.login-panel label {
  font-weight: 600;
  font-size: 12px;
}
.login-panel form button {
  margin-top: 5px;
}
.login-panel form p {
  font-size: 13px;
  margin: 0;
}
.sighting {
  display: flex;
  gap: 18px;
  padding: 19px 0;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}
.sighting>img {
  width: 130px;
  height: 100px;
  border-radius: 6px;
  flex-shrink: 0;
}
.sighting h3 {
  font-size: 16px;
  margin: 0 0 4px;
}
.sighting p {
  margin: 0 0 7px;
  font-size: 12px;
}
.sighting .scientific {
  font-style: italic;
  color: var(--muted);
}
.sighting .sighting-meta {
  color: #326a94;
}
.sighting .sighting-comment {
  font-size: 13px;
  overflow-wrap: anywhere;
  white-space: normal;
}
#feed-sentinel {
  padding: 15px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.profile-details {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  margin: 0 0 24px;
}
.profile-details dt {
  font-weight: 700;
}
.profile-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
dialog::backdrop {
  background: rgba(3,20,38,.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.modal-header {
  position: sticky;
  top: 0;
  background: #e1effc;
}
.modal-header button {
  margin-left: auto;
}
.modal-header h2 {
  padding-right: 16px;
}
@media (min-width:1800px) {
  .hero {
    grid-template-columns: minmax(0,1fr) 340px;
  }
  .hero-copy {
    padding: 25px 34px;
  }
}
@media (max-width:1100px) {
  #app {
    grid-template-columns: 235px minmax(0,1fr);
  }
  .workspace-header {
    padding: 15px 24px;
  }
  .hero {
    grid-template-columns: minmax(0,1fr) 250px;
  }
  .hero-copy {
    padding: 23px;
  }
  .hero h1 {
    font-size: 26px;
  }
  .home-grid {
    grid-template-columns: 1fr;
  }
  .account-name {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width:760px) {
  #app {
    display: block;
  }
  .site-header {
    padding: 14px 18px;
  }
  .workspace-header {
    min-height: 65px;
    padding: 12px 18px;
    gap: 10px;
  }
  .workspace-header h1 {
    font-size: 20px;
  }
  .account-controls {
    gap: 8px;
  }
  .account-name,.account-button>.nav-icon {
    display: none;
  }
  .avatar {
    width: 32px;
    height: 32px;
  }
  .logout-button {
    padding: 7px 9px;
  }
  .hero {
    grid-template-columns: minmax(0,1fr) 34%;
    min-height: 0;
  }
  .hero-copy {
    padding: 20px;
  }
  .hero h1 {
    font-size: 24px;
  }
  .hero-copy>p:not(.eyebrow) {
    font-size: 13px;
  }
  .hero-visual {
    grid-row: auto;
    min-height: 240px;
  }
  .hero-visual img {
    object-fit: contain;
    background: #193c62;
    object-position: center;
  }
  .tip-trigger {
    font-size: 11px;
    padding: 8px 10px;
  }
  .sighting {
    gap: 13px;
  }
  .sighting>img {
    width: 95px;
    height: 80px;
  }
  .sighting h3 {
    font-size: 15px;
  }
  .profile-details {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .profile-details dd {
    margin-bottom: 10px;
  }
}
@media (max-width:440px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    grid-row: 1;
    height: 210px;
    min-height: 210px;
    background: #193c62;
  }
  .hero-visual img {
    object-fit: contain;
  }
  .hero-copy {
    padding: 22px;
  }
}
/* Subtle lake-blue depth, matching title icons, and high-visibility login errors. */
.site-header {
  background: linear-gradient(165deg,#073864 0%,#09558f 45%,#126ca9 100%);
  background-attachment: fixed;
}
.site-nav .add-only {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-size: 14px;
  padding: 11px 13px;
  min-height: 44px;
  border: 0;
}
.workspace-header h1 .nav-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}
.login-panel form #login-message:empty {
  display: none;
}
.login-panel form #login-message.login-error {
  display: block;
  background: #fff0f0;
  color: #a31522;
  border: 1px solid #e69a9f;
  border-left: 4px solid #c62936;
  border-radius: 6px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 5px 0 0;
}
.login-status {
  color: var(--muted);
  padding: 8px 0;
}
.observation-matches {
  list-style: none;
  padding: 0;
  margin: 0;
}
.observation-matches li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
#modal-content>#observation-search,#modal-content>.panel {
  border: 0;
  padding: 0;
}
#modal-content .actions input {
  flex: 1;
  min-width: 140px;
}
/* Featured weekly tip and a consistent, more readable modal shape. */
.tip-trigger {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: min(100%,440px);
  padding: 15px 18px;
  margin-top: 20px;
  border: 1px solid #1475ba;
  border-radius: 10px;
  background: linear-gradient(115deg,#07528f,#0879bd);
  color: white;
  box-shadow: 0 5px 14px #06558b24;
  text-align: left;
  transition: box-shadow .18s;
}
.tip-trigger:hover {
  box-shadow: 0 7px 20px #06558b38;
  transform: none;
}
.tip-emblem {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #ffe49a;
  color: #173c60;
  border-radius: 50%;
}
.tip-emblem .nav-icon {
  width: 25px;
  height: 25px;
}
.tip-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tip-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  color: #d7ecff;
}
.tip-label strong {
  font-family: Poppins,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
dialog {
  width: min(710px,94vw);
  height: auto;
  min-height: min(440px,85dvh);
  max-height: 92dvh;
}
.modal-header {
  padding: 22px 28px;
}
.modal-header h2 {
  font-size: 23px;
}
#modal-content {
  padding: 28px 32px;
  font-size: 16px;
  line-height: 1.85;
  flex: 1;
  min-height: 0;
}
#modal-content td {
  font-size: 16px;
}
#modal-content .profile-details {
  font-size: 16px;
}
#modal-content h3 {
  font-size: 20px;
}
#modal-content p {
  margin-bottom: 20px;
}
#modal-content .panel {
  font-size: 16px;
}
@media (max-width:760px) {
  .tip-trigger {
    padding: 13px 14px;
    gap: 11px;
  }
  .tip-emblem {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .tip-emblem .nav-icon {
    width: 22px;
    height: 22px;
  }
  .tip-label strong {
    font-size: 14px;
  }
  .tip-kicker {
    font-size: 8px;
  }
  dialog {
    width: 95vw;
    min-height: min(420px,85dvh);
    max-height: 92dvh;
  }
  .modal-header {
    padding: 18px 20px;
  }
  .modal-header h2 {
    font-size: 20px;
  }
  #modal-content {
    padding: 23px;
    font-size: 16px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .tip-trigger {
    transition: none;
  }
  .tip-trigger:hover {
    transform: none;
  }
}
/* Consistent icon/text line boxes and compact, content-sized dialogs. */
.site-nav a,.site-nav .add-only {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 44px;
  line-height: 20px;
}
.site-nav a>span,.site-nav .add-only>span {
  display: block;
  line-height: 20px;
  margin: 0;
  padding: 0;
}
.nav-icon {
  display: block;
  vertical-align: middle;
  align-self: center;
}
.site-nav .nav-icon {
  width: 20px;
  height: 20px;
  transform: translateY(1px);
}
.workspace-header h1 {
  display: flex;
  gap: 12px;
  line-height: 1.2;
}
.workspace-header h1>span {
  line-height: 1.2;
}
.workspace-header h1>.nav-icon {
  flex: 0 0 24px;
  transform: translateY(1px);
}
#guide-modal {
  width: min(680px,94vw);
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
}
#guide-modal[open] {
  display: flex;
  flex-direction: column;
}
#guide-modal .modal-header {
  padding: 18px 24px;
  min-height: 0;
}
#guide-modal .modal-header h2 {
  font-size: 21px;
  line-height: 1.3;
}
#guide-modal #modal-content {
  flex: 0 1 auto;
  min-height: 0;
  padding: 23px 28px;
  font-size: 16px;
  line-height: 1.7;
  overflow: auto;
}
#guide-modal #modal-content>:last-child {
  margin-bottom: 0;
}
/* Dense sightings feed with a blue section heading. */
.sightings-panel {
  padding: 0 20px 14px;
  overflow: hidden;
}
.sightings-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  margin: 0 -20px 0;
  background: linear-gradient(100deg,#e1effc,#f4f9fe);
  border-bottom: 1px solid #c1d9ee;
}
.sightings-heading h2 {
  font-size: 18px;
  line-height: 24px;
  color: #075b9e;
  margin: 0;
}
.sightings-heading-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 7px;
  background: #cce4f8;
  color: #075b9e;
}
.sightings-heading-icon .nav-icon {
  width: 19px;
  height: 19px;
}
.sighting {
  gap: 13px;
  padding: 11px 0;
  min-height: 0;
  align-items: center;
}
.sighting:first-child {
  border-top: 0;
}
.sighting>img {
  width: 84px;
  height: 66px;
  flex: 0 0 84px;
  object-fit: cover;
  border-radius: 5px;
}
.sighting>div {
  flex: 1;
  min-width: 0;
}
.sighting h3 {
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 3px;
}
.sighting p {
  line-height: 1.4;
  margin: 0 0 3px;
}
.sighting .scientific {
  font-size: 11px;
  margin: 0 0 4px;
}
.sighting .sighting-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 2px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
.sighting .sighting-comment {
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
}
#feed-sentinel {
  padding-top: 10px;
}
@media (max-width:760px) {
  #guide-modal {
    width: 95vw;
    height: fit-content;
    min-height: 0;
    max-height: calc(100dvh - 32px);
  }
  #guide-modal .modal-header {
    padding: 15px 18px;
  }
  #guide-modal .modal-header h2 {
    font-size: 19px;
  }
  #guide-modal #modal-content {
    padding: 20px;
    font-size: 16px;
  }
  .sightings-panel {
    padding: 0 16px 12px;
  }
  .sightings-heading {
    margin: 0 -16px;
    padding: 13px 16px;
  }
  .sightings-heading h2 {
    font-size: 17px;
  }
  .sighting {
    gap: 11px;
    padding: 10px 0;
  }
  .sighting>img {
    width: 70px;
    height: 58px;
    flex-basis: 70px;
  }
  .sighting h3 {
    font-size: 13px;
  }
  .sighting .sighting-meta {
    column-gap: 8px;
    row-gap: 2px;
  }
  .workspace-header h1>.nav-icon {
    flex-basis: 22px;
  }
}
/* Overview: welcome copy, centered weekly tip, and crane photograph. */
.hero.hero-overview {
  grid-template-columns: minmax(280px,1.1fr) minmax(250px,.85fr) 310px;
}
.hero-overview .hero-copy {
  padding: 26px 30px;
}
.hero-overview .hero-copy>p:not(.eyebrow) {
  max-width: 440px;
}
.hero-tip {
  display: flex;
  padding: 28px 24px 28px 8px;
  min-width: 0;
}
.hero-tip .tip-trigger {
  width: 100%;
  max-width: 340px;
  margin: 0;
  gap: 12px;
  padding: 17px 16px;
}
.hero-tip .tip-label {
  min-width: 0;
}
.hero-tip .tip-label strong {
  font-size: 16px;
}
.hero-tip .hero-tip .tip-emblem {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}
/* Match the icon's optical center to the Poppins heading glyphs. */
.workspace-header h1 {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  align-items: center;
  column-gap: 12px;
  line-height: 1;
  margin: 0;
}
.workspace-header h1>span {
  display: block;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.workspace-header h1>.nav-icon {
  display: block;
  width: 24px;
  height: 24px;
  align-self: center;
  transform: translateY(-2px);
}
@media (min-width:1800px) {
  .hero.hero-overview {
    grid-template-columns: minmax(330px,1.1fr) minmax(280px,.9fr) 340px;
  }
}
@media (max-width:1200px) and (min-width:761px) {
  .hero.hero-overview {
    grid-template-columns: minmax(240px,1fr) minmax(210px,.8fr) 210px;
  }
  .hero-overview .hero-copy {
    padding: 24px;
  }
  .hero-tip {
    padding: 22px 18px 22px 0;
  }
  .hero-tip .tip-trigger {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
  }
  .hero-tip .tip-label {
    flex: 1;
    min-width: 100px;
  }
  .hero-tip .tip-label strong {
    font-size: 14px;
  }
}
@media (max-width:1000px) and (min-width:761px) {
  .hero-overview .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-tip {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .hero-overview .hero-visual {
    grid-column: 2;
    grid-row: 1/3;
  }
  .hero-tip .tip-trigger {
    max-width: 340px;
  }
}
@media (max-width:760px) {
  .hero-overview .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-tip {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .hero-overview .hero-visual {
    grid-column: 2;
    grid-row: 1/3;
  }
  .hero-tip .tip-trigger {
    padding: 13px;
    gap: 10px;
  }
  .hero-tip .tip-label strong {
    font-size: 14px;
  }
  .hero-tip .tip-emblem {
    flex-basis: 32px;
  }
  .hero-tip .workspace-header h1 {
    grid-template-columns: 22px minmax(0,1fr);
  }
  .workspace-header h1>.nav-icon {
    width: 22px;
    height: 22px;
    transform: translateY(-2px);
  }
}
@media (max-width:440px) {
  .hero-overview .hero-visual {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-overview .hero-copy {
    grid-column: 1;
    grid-row: 2;
  }
  .hero-tip {
    grid-column: 1;
    grid-row: 3;
  }
}
/* Balanced welcome columns, explicit tip action, and contextual help. */
.hero.hero-overview {
  grid-template-columns: minmax(280px,1fr) minmax(250px,1fr) 310px;
}
.hero-tip {
  padding: 28px 24px;
  justify-content: center;
  align-items: center;
}
.hero-tip .tip-trigger {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  column-gap: 12px;
  row-gap: 5px;
  max-width: 310px;
  padding: 17px 20px;
  text-align: left;
}
.hero-tip .tip-emblem {
  grid-column: 1;
  grid-row: 1/3;
}
.hero-tip .tip-label {
  grid-column: 2;
  grid-row: 1;
}
.tip-action {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #e0f1ff;
}
.welcome-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.welcome-title h1 {
  min-width: 0;
}
.welcome-help {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-top: 14px;
  border: 1px solid #a8c9e5;
  border-radius: 50%;
  color: #075b9e;
  background: #edf6ff;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}
.welcome-help:hover {
  background: #d9ecfc;
  border-color: #579ad0;
}
@media (min-width:1800px) {
  .hero.hero-overview {
    grid-template-columns: minmax(330px,1fr) minmax(280px,1fr) 340px;
  }
}
@media (max-width:1200px) and (min-width:1001px) {
  .hero.hero-overview {
    grid-template-columns: minmax(240px,1fr) minmax(210px,1fr) 210px;
  }
  .hero-tip {
    padding: 22px 16px;
  }
  .hero-tip .tip-trigger {
    padding: 15px;
    grid-template-columns: 34px minmax(0,1fr);
    column-gap: 10px;
  }
  .hero-tip .tip-emblem {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}
@media (max-width:1000px) and (min-width:761px) {
  .hero.hero-overview {
    grid-template-columns: minmax(0,1fr) 220px;
  }
  .hero-tip {
    padding: 0 24px 24px;
    justify-content: center;
  }
}
@media (max-width:760px) {
  .hero.hero-overview {
    grid-template-columns: minmax(0,1fr) 34%;
  }
  .hero-tip {
    padding: 0 22px 22px;
    justify-content: center;
  }
  .hero-tip .tip-trigger {
    grid-template-columns: 32px minmax(0,1fr);
    padding: 14px;
    column-gap: 10px;
  }
  .hero-tip .tip-emblem {
    width: 32px;
    height: 32px;
  }
  .welcome-title {
    gap: 10px;
  }
  .welcome-help {
    margin-top: 12px;
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: 16px;
  }
}
@media (max-width:440px) {
  .hero.hero-overview {
    grid-template-columns: 1fr;
  }
}
/* Banner-wide centering and comfortable weekly-tip reading size. */
@media (min-width:1201px) {
  .hero.hero-overview {
    grid-template-columns: minmax(0,1fr) 310px minmax(0,1fr);
  }
  .hero-overview .hero-tip {
    padding: 24px 0;
  }
  .hero-overview .hero-visual {
    width: min(100%,310px);
    justify-self: end;
  }
  .hero-overview .hero-copy {
    padding-right: 22px;
  }
}
@media (min-width:1800px) {
  .hero-overview .hero-visual {
    width: 340px;
  }
}
.hero-overview .welcome-title {
  justify-content: flex-start;
  gap: 14px;
  max-width: 440px;
  align-items: flex-start;
}
.hero-overview .welcome-help {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  font-size: 21px;
  margin-top: 15px;
}
#guide-modal.bird-tip-modal {
  width: min(700px,94vw);
  min-height: min(370px,calc(100dvh - 48px));
}
#guide-modal.bird-tip-modal #modal-content {
  font-size: 17px;
  line-height: 1.8;
  padding: 28px 32px;
}
.sidebar-donate {
  margin-top: auto;
  padding: 22px 0 18px;
}
.sidebar-donate button {
  width: 100%;
  background: #e1effc;
  border-color: #b7d9f3;
  color: #084b88;
  font-weight: 700;
}
.sidebar-donate button:hover {
  background: white;
}
.sidebar-donate+.tins-link {
  margin-top: 0;
}
@media (max-width:760px) {
  .hero-overview .welcome-help {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 19px;
  }
  #guide-modal.bird-tip-modal {
    min-height: min(350px,calc(100dvh - 32px));
  }
  #guide-modal.bird-tip-modal #modal-content {
    padding: 24px;
    font-size: 17px;
  }
  .sidebar-donate {
    display: none;
    flex-basis: 100%;
    margin: 0;
    padding: 14px 0 0;
  }
  .site-nav.open~.sidebar-donate {
    display: block;
  }
}
/* Overview actions: donation above weekly tip, with a wider introduction. */
.hero-overview .hero-copy {
  padding-top: 28px;
  padding-bottom: 28px;
}
.hero-overview .welcome-title {
  max-width: 560px;
}
.hero-overview .welcome-title h1 {
  margin-top: 0;
}
.hero-overview .welcome-help {
  margin-top: 4px;
}
.hero-overview .hero-copy>p:not(.eyebrow) {
  max-width: 560px;
  margin-bottom: 0;
}
.hero-overview .hero-tip {
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 28px 24px;
}
.hero-donate {
  width: 100%;
  max-width: 310px;
  margin: 0;
}
.hero-donate button {
  width: 100%;
  min-height: 48px;
  border: 1px solid #99c4e5;
  background: #e1effc;
  color: #084b88;
  font-weight: 700;
  font-size: 16px;
  border-radius: 9px;
}
.hero-donate button:hover {
  background: #cce5f8;
  border-color: #5d9bc9;
}
@media (min-width:1201px) {
  .hero.hero-overview {
    grid-template-columns: minmax(0,1.45fr) minmax(280px,1fr) 310px;
  }
  .hero-overview .hero-visual {
    width: 100%;
  }
}
@media (min-width:1800px) {
  .hero.hero-overview {
    grid-template-columns: minmax(0,1.45fr) minmax(300px,1fr) 340px;
  }
}
@media (min-width:1001px) and (max-width:1200px) {
  .hero.hero-overview {
    grid-template-columns: minmax(0,1.3fr) minmax(210px,1fr) 180px;
  }
  .hero-overview .hero-tip {
    padding: 24px 14px;
  }
}
@media (max-width:1000px) {
  .hero-overview .hero-tip {
    padding: 0 24px 24px;
    gap: 16px;
  }
  .hero-overview .welcome-title h1 {
    font-size: 28px;
  }
}
@media (max-width:760px) {
  .hero-overview .hero-copy {
    padding: 22px;
  }
  .hero-overview .hero-tip {
    padding: 0 22px 22px;
  }
  .hero-overview .welcome-title h1 {
    font-size: 25px;
  }
}
/* Stationary hover feedback throughout the preview. */
button:hover,button:active,a.button:hover,a.button:active {
  transform: none;
}
.hero-donate button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 70px;
  border: 1px solid #d2ae59;
  background: linear-gradient(120deg,#fff4ce,#f5d98d);
  color: #63440d;
  box-shadow: 0 3px 10px #84622118,inset 0 1px 0 #fffaf0;
  text-align: left;
}
.hero-donate button:hover {
  background: linear-gradient(120deg,#ffefba,#efd080);
  border-color: #bc9541;
}
.donate-emblem {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff80;
  font-size: 30px;
  line-height: 1;
}
.donate-caption {
  display: block;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 1px;
}
.rank-number.medal-1 {
  background: linear-gradient(135deg,#fff0af,#e6bd45);
  border: 1px solid #c99c2d;
  color: #624600;
  font-weight: 800;
}
.rank-number.medal-2 {
  background: linear-gradient(135deg,#f4f7fa,#bcc7d3);
  border: 1px solid #a3afbc;
  color: #35465a;
  font-weight: 800;
}
.rank-number.medal-3 {
  background: linear-gradient(135deg,#f6d7b9,#cb956b);
  border: 1px solid #b17a50;
  color: #623b20;
  font-weight: 800;
}
.species-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.species-name img {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 34px;
  object-fit: cover;
  border-radius: 5px;
}
td:has(.species-name) {
  padding-top: 8px;
  padding-bottom: 8px;
}
.guide-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guide-section-title .nav-icon {
  width: 25px;
  height: 25px;
  color: #076bb8;
  flex-shrink: 0;
}
#guide-modal.resource-modal {
  height: 66dvh;
}
#guide-modal.resource-modal #modal-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
@media (max-width:760px) {
  #guide-modal.resource-modal {
    height: 66dvh;
  }
}
a.resource-link {
  text-decoration: none;
}
/* Profile editing and account actions. */
.logout-button {
  background: #fff0f1;
  border: 1px solid #ce5b66;
  color: #a51e30;
  font-weight: 750;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 7px;
}
.logout-button:hover {
  background: #a51e30;
  border-color: #a51e30;
  color: white;
}
.profile-name-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin: 16px 0 22px;
}
#modal-content .profile-name-section h3 {
  margin: 0 0 10px;
  font-size: 17px;
}
#modal-content .field-help,#modal-content .name-request-status {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.approved-name {
  font-weight: 700;
}
.approved-name span {
  font-size: 11px;
  border-radius: 12px;
  background: #e5f3ee;
  color: #25654c;
  padding: 3px 8px;
  margin-left: 6px;
}
#profile-name-form label,.profile-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}
#profile-name-form .actions {
  margin-top: 7px;
}
#profile-name-form input {
  min-width: 140px;
  flex: 1;
}
.profile-edit-form {
  display: grid;
  gap: 18px;
}
.profile-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.profile-edit-form input {
  width: 100%;
  min-width: 0;
  font-weight: 400;
}
.profile-edit-form details {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.profile-edit-form summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
.profile-edit-form details label {
  margin-top: 12px;
}
#modal-content .form-message {
  font-size: 14px;
  margin: 12px 0 0;
}
.form-message:empty {
  display: none;
}
.form-message.error {
  background: #fff0f1;
  border: 1px solid #df8a94;
  color: #a51e30;
  padding: 12px;
  border-radius: 6px;
}
.form-message.success {
  background: #e7f3ee;
  color: #25654c;
  border: 1px solid #b7d7c7;
  padding: 12px;
  border-radius: 6px;
}
.approval-page {
  max-width: 650px;
  margin: 8vh auto;
  padding: 30px;
}
.approval-page .profile-details {
  margin: 24px 0;
}
@media (max-width:540px) {
  .profile-field-row {
    grid-template-columns: 1fr;
  }
  .approval-page {
    margin: 20px 14px;
  }
  .account-controls .logout-button {
    padding: 8px 12px;
  }
}
/* Persistent organization link and click-operated account menu. */
@media (min-width:761px) {
  #app {
    background: linear-gradient(to right,#09558f 260px,transparent 260px);
  }
  .site-header {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    overflow-y: auto;
  }
  .site-header .tins-link {
    margin-top: auto;
    flex-shrink: 0;
  }
}
@media (min-width:761px) and (max-width:1100px) {
  #app {
    background: linear-gradient(to right,#09558f 235px,transparent 235px);
  }
}
.tins-link {
  display: flex;
  padding: 16px 0 4px;
  font-size: 10px;
}
.tins-link img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
}
.account-menu-wrap {
  position: relative;
}
.account-button {
  min-height: 42px;
  padding: 3px 5px;
  border-radius: 7px;
}
.account-button:hover {
  background: #edf5fc;
}
.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px;
  box-shadow: 0 8px 24px #15345226;
  z-index: 30;
}
.account-menu[hidden] {
  display: none;
}
.account-menu:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 9px;
}
.account-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 11px 12px;
  font-size: 14px;
}
.account-menu button:hover {
  background: #e1effc;
}
.account-menu .logout-button {
  margin-top: 4px;
  background: #fff0f1;
  color: #a51e30;
}
.account-menu .logout-button:hover {
  background: #fbdde1;
}
.account-menu .nav-icon {
  width: 19px;
  height: 19px;
}
#guide-modal.observation-modal {
  width: min(960px,95vw);
  height: 82dvh;
  min-height: 0;
}
#guide-modal.observation-modal #modal-content {
  flex: 1;
  overflow: auto;
  scrollbar-gutter: stable;
}
#observation-search .actions {
  align-items: center;
}
#observation-search input[type=search] {
  min-width: 160px;
  flex: 1;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}
.check-label input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.observation-help {
  padding-top: 24px;
  font-size: 14px;
}
.observation-count {
  margin-top: 20px;
  font-size: 13px;
}
.observation-choice {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 18px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
}
.observation-select {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
}
.observation-select>input {
  width: 19px;
  height: 19px;
  margin-top: 4px;
}
.observation-select small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.observation-choice>img {
  width: 82px;
  height: 62px;
  object-fit: cover;
  border-radius: 6px;
}
.observation-bird-links {
  grid-column: 1/-1;
  display: flex;
  gap: 18px;
  font-size: 12px;
}
.rare-notice {
  grid-column: 1/-1;
  background: #fff7e7;
  border: 1px solid #e8cc92;
  border-radius: 6px;
  padding: 14px;
  font-size: 13px;
}
.observation-comment {
  display: grid;
  gap: 7px;
  margin: 20px 0;
  font-size: 14px;
}
.observation-comment textarea {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  width: 100%;
}
#guide-modal.profile-modal {
  width: min(720px,95vw);
  height: 82dvh;
  min-height: 0;
}
#guide-modal.profile-modal #modal-content {
  flex: 1;
  scrollbar-gutter: stable;
}
.profile-edit-form.viewing .profile-edit-only {
  visibility: hidden;
}
.profile-edit-form .profile-name-section {
  margin: 0;
  padding: 0;
  border: 0;
}
.profile-edit-form .profile-edit-only {
  margin-top: 10px;
}
.profile-edit-form input[readonly] {
  background: #f2f6fa;
  border-color: #d8e3ee;
  color: var(--ink);
  cursor: default;
}
.profile-edit-form .actions {
  min-height: 44px;
}
@media (max-width:760px) {
  .tins-link {
    display: flex;
    flex-basis: 100%;
    margin: 12px 0 0;
    padding: 10px 0 0;
    font-size: 10px;
  }
  .tins-link img {
    width: 38px;
    height: 38px;
  }
  .site-header {
    position: static;
    height: auto;
  }
  .observation-choice {
    column-gap: 10px;
  }
  #observation-search .check-label {
    flex-basis: 100%;
  }
}
/* Participant Guide and compact observation workflow. */
.tins-link img {
  width: 42px;
  height: 42px;
}
#guide-modal.observation-modal {
  width: min(900px,95vw);
  height: 78dvh;
  max-height: calc(100dvh - 32px);
}
#guide-modal.observation-modal #modal-content {
  display: flex;
  flex-direction: column;
  padding: 22px 26px 0;
  gap: 0;
}
#observation-search {
  flex-shrink: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 3;
}
#observation-search>label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.observation-search-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: start;
}
.bird-search-field {
  position: relative;
  min-width: 0;
}
#observation-search #bird-search {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 10px 13px;
  background: #fff;
  border: 1px solid #abcbe5;
  border-radius: 7px;
  font-size: 15px;
}
.observation-search-row>.button {
  height: 44px;
  min-height: 44px;
  padding: 9px 22px;
}
#observation-search .rare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 12px 0 0;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}
#observation-search .rare-toggle input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 17px;
  accent-color: #076bb8;
}
.bird-suggestions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: min(300px,35dvh);
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: white;
  border: 1px solid #aacbe5;
  border-radius: 9px;
  box-shadow: 0 9px 26px #163c6026;
  z-index: 10;
}
.bird-suggestions[hidden] {
  display: none;
}
#modal-content .bird-suggestions li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  margin: 0;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.35;
}
.bird-suggestions li:hover,.bird-suggestions li[aria-selected=true] {
  background: #e5f2fc;
}
.bird-suggestions li>span:not(.suggestion-rare) {
  min-width: 0;
}
.bird-suggestions strong {
  display: block;
  font-size: 13px;
}
.bird-suggestions small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
#modal-content .bird-suggestions img,.suggestion-image-placeholder {
  width: 40px;
  height: 32px;
  flex: 0 0 40px;
  border-radius: 4px;
  object-fit: cover;
  background: #edf5fc;
}
.suggestion-rare {
  margin-left: auto;
  font-size: 10px;
  background: #fff1d7;
  color: #805c18;
  border-radius: 10px;
  padding: 2px 7px;
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
#observation-results {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 0 2px 20px;
}
.observation-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 0 12px;
}
#modal-content .observation-results-heading h3 {
  font-size: 14px;
  margin: 0;
}
.observation-results-heading>span {
  font-size: 12px;
  color: var(--muted);
}
.observation-choices {
  display: grid;
  gap: 9px;
}
.observation-choice {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  grid-template-columns: minmax(0,1fr) 72px;
  gap: 5px 16px;
}
.observation-choice:has(input[name=bird]:checked) {
  border-color: #4b9ed8;
}
.observation-select {
  grid-column: 1;
  grid-row: 1;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.5;
}
.observation-select>input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: #076bb8;
}
.observation-select small {
  font-size: 11px;
}
.observation-choice>img {
  grid-column: 2;
  grid-row: 1/3;
  width: 72px;
  height: 56px;
  align-self: center;
}
.observation-bird-links {
  grid-column: 1;
  grid-row: 2;
  padding-left: 28px;
}
.observation-choice .rare-notice {
  grid-row: 3;
  margin-top: 8px;
}
#modal-content .rare-notice p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.observation-notes {
  margin-top: 17px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 14px;
  background: #f7faff;
}
.observation-notes summary,.observation-instructions summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.observation-notes summary span {
  font-weight: 400;
  color: var(--muted);
}
.observation-notes .observation-comment {
  margin: 10px 0 0;
}
.observation-comment textarea {
  resize: vertical;
  min-height: 65px;
  max-height: 180px;
}
.observation-instructions {
  margin: 13px 0;
  font-size: 12px;
  color: var(--muted);
}
#modal-content .observation-instructions p {
  font-size: 12px;
  margin: 8px 0;
  line-height: 1.6;
}
.observation-submit-bar {
  position: sticky;
  bottom: -20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #f0f7fd;
  border-top: 1px solid #c3dced;
  padding: 13px 14px;
  margin: 18px -2px 0;
  z-index: 2;
}
.observation-submit-bar>span {
  font-size: 13px;
  font-weight: 600;
}
.observation-submit-bar button {
  min-height: 42px;
  font-size: 13px;
}
.observation-submit-bar button:disabled {
  background: #b4c9da;
  color: #fff;
  cursor: default;
  filter: none;
}
#modal-content .observation-help {
  padding: 20px 3px;
  font-size: 13px;
  line-height: 1.7;
}
#modal-content .observation-help p {
  margin-bottom: 12px;
}
#modal-content .observation-help li {
  margin-bottom: 10px;
}
@media (max-width:760px) {
  .tins-link img {
    width: 32px;
    height: 32px;
  }
  #guide-modal.observation-modal #modal-content {
    padding: 17px 16px 0;
  }
  .observation-search-row {
    gap: 8px;
  }
  .observation-search-row>.button {
    padding: 9px 14px;
  }
  .observation-choice {
    padding: 12px 10px;
    column-gap: 8px;
  }
  .suggestion-rare {
    display: none;
  }
}
/* Centered lists, balanced profile columns and avatar editing. */
.listing-layout {
  width: 75%;
  margin: 0 auto;
}
.tins-link {
  justify-content: center;
  align-items: center;
  text-align: left;
  min-height: 104px;
  padding: 16px 8px;
  gap: 10px;
}
.profile-avatar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}
.profile-avatar {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #c3dced;
}
.profile-avatar.initials {
  display: grid;
  font-size: 25px;
}
.profile-edit-form .avatar-upload-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.profile-edit-form .avatar-upload-controls label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  min-height: 34px;
  padding: 6px 12px;
  cursor: pointer;
}
.avatar-upload-controls>span {
  font-size: 11px;
  color: var(--muted);
}
.avatar-upload-controls:focus-within label {
  outline: 2px solid #1687dd;
  outline-offset: 2px;
}
.profile-edit-form .profile-name-section {
  align-items: start;
  gap: 16px;
}
.profile-edit-form .profile-name-section>.profile-edit-only {
  margin: 0;
  padding-top: 2px;
}
#modal-content .profile-name-section .field-help {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 9px;
}
.profile-name-section #request-profile-name {
  min-height: 34px;
  font-size: 12px;
  padding: 6px 12px;
}
@media (max-width:1200px) {
  .listing-layout {
    width: 100%;
  }
}
@media (max-width:760px) {
  .tins-link {
    min-height: 74px;
    padding: 12px 8px;
  }
}
@media (max-width:540px) {
  .profile-edit-form .profile-name-section {
    gap: 10px;
  }
}
/* TINS-inspired golden navigation and coral donation accent. */
.site-nav a:hover {
  background: linear-gradient(110deg,#fff0b6,#f8df83);
  color: #173c60;
}
.site-nav a[aria-current=page] {
  background: linear-gradient(110deg,#f9dc75,#f1c54d);
  color: #163452;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff2ba66;
}
.site-nav a[aria-current=page]:hover {
  background: linear-gradient(110deg,#ffe48b,#f6cf59);
  color: #163452;
}
.site-nav .add-only:hover {
  background: linear-gradient(110deg,#fff0b6,#f8df83);
  color: #173c60;
}
.hero-donate button {
  background: linear-gradient(115deg,#e45b3a 0%,#ec5c39 55%,#ed6947 100%);
  border-color: #d84f2f;
  color: white;
  font-size: 20px;
  font-weight: 750;
  box-shadow: 0 4px 13px #b6482826,inset 0 1px 0 #ffb49b80;
}
.hero-donate button:hover {
  background: linear-gradient(115deg,#dc5132,#e65634 55%,#e9613e);
  border-color: #c9482b;
  box-shadow: 0 5px 16px #b6482833;
}
.hero-donate .donate-caption {
  color: #291006;
  font-size: 10px;
  font-weight: 700;
}
.hero-donate .donate-emblem {
  background: #fff0e5d9;
  color: #b94428;
  box-shadow: inset 0 1px 0 #ffffffa6;
}
/* Only the workspace below the header scrolls; its gutter never changes width. */
body.explorer {
  height: 100dvh;
  overflow: hidden;
}
.explorer #app {
  height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0,1fr);
  overflow: hidden;
}
.explorer .site-header {
  grid-row: 1/3;
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}
.explorer .workspace-header {
  grid-row: 1;
  position: relative;
  top: auto;
  min-width: 0;
}
.workspace-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
}
.workspace-content>.page {
  flex: 1 0 auto;
  min-width: 0;
  margin: 0 auto;
}
.workspace-content>.site-footer {
  flex: 0 0 auto;
}
.workspace-content:focus-visible {
  outline: 2px solid #1687dd;
  outline-offset: -2px;
}
@supports not (scrollbar-gutter:stable) {
  .workspace-content {
    overflow-y: scroll;
  }
}
@media (max-width:760px) {
  .explorer #app {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
  }
  .explorer .site-header {
    max-height: 45dvh;
    overflow-y: auto;
    position: relative;
  }
}
/* Larger centered TINS footer branding. */
.tins-link {
  min-height: 128px;
  padding: 20px 0;
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
}
.tins-link img {
  width: 56px;
  height: 56px;
}
@media (max-width:760px) {
  .tins-link {
    min-height: 88px;
    padding: 14px 0;
    font-size: 11px;
    gap: 12px;
  }
  .tins-link img {
    width: 44px;
    height: 44px;
  }
}
/* Primary sidebar action: golden fill, clear plus badge, stationary feedback. */
.site-nav .add-only {
  grid-template-columns: 32px minmax(0,1fr);
  column-gap: 10px;
  min-height: 58px;
  padding: 11px 12px;
  margin-top: 19px;
  border: 1px solid #ffe9a0;
  border-radius: 10px;
  background: linear-gradient(115deg,#ffe99a,#f5ca55);
  color: #143755;
  font-family: Poppins,Arial,sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 5px 14px #0327423d,inset 0 1px 0 #fff7d6;
}
.site-nav .add-only .nav-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  background: #0b527f;
  color: white;
  stroke-width: 2;
  transform: none;
  box-shadow: 0 1px 3px #624d1626;
}
.site-nav .add-only:hover {
  background: linear-gradient(115deg,#fff0b5,#ffda6c);
  color: #143755;
  border-color: #fff1bd;
  box-shadow: 0 5px 16px #0327424d,inset 0 1px 0 #fff9e8;
  filter: none;
}
.site-nav .add-only:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}
/* Overview typography trial, compact organization footer and distinct primary action. */
.tins-link {
  min-height: 96px;
  padding: 12px 0;
}
.site-nav .add-only {
  background: linear-gradient(115deg,#ffe3d4,#f7b599);
  border-color: #ffd7c4;
  color: #642b1b;
  box-shadow: 0 5px 14px #0327423d,inset 0 1px 0 #fff4ed;
}
.site-nav .add-only .nav-icon {
  background: #b84124;
}
.site-nav .add-only:hover {
  background: linear-gradient(115deg,#ffecdf,#ffc8ac);
  border-color: #ffe5d6;
  color: #642b1b;
  box-shadow: 0 5px 16px #0327424d,inset 0 1px 0 #fff8f2;
}
body.overview-page {
  font-family: Poppins,Arial,sans-serif;
}
.overview-page button,.overview-page input,.overview-page select,.overview-page textarea {
  font-family: Poppins,Arial,sans-serif;
}
@media (max-width:760px) {
  .tins-link {
    min-height: 66px;
    padding: 8px 0;
  }
}
/* Remove space beneath the desktop footer so its 96px region ends at the viewport. */
@media (min-width:761px) {
  .explorer .site-header {
    padding-bottom: 0;
  }
  .explorer .site-header .tins-link {
    height: 96px;
    min-height: 96px;
    flex-shrink: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
}
/* Explicit desktop sidebar rows eliminate inherited footer spacing. */
@media (min-width:761px) {
  .explorer .site-header {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) 96px;
    padding: 0;
    overflow: hidden;
    gap: 0;
  }
  .explorer .site-header>.brand {
    grid-row: 1;
    margin: 26px 22px 0;
  }
  .explorer .site-header>.site-nav {
    grid-row: 2;
    margin: 25px 0 0;
    padding: 0 22px 24px;
    min-height: 0;
    overflow-y: auto;
  }
  .explorer .site-header>.site-nav>* {
    flex-shrink: 0;
  }
  .explorer .site-header>.tins-link {
    grid-row: 3;
    align-self: stretch;
    justify-self: stretch;
    height: 96px;
    min-height: 0;
    margin: 0 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
/* Primary observation action: steady yellow border and glow. */
.site-nav .add-only {
  background: linear-gradient(115deg,#ffffff,#eaf4ff);
  border: 2px solid #f7d66a;
  color: #104b77;
  box-shadow: 0 0 10px 2px #f7d66a55,0 5px 14px #0327423d;
}
.site-nav .add-only .nav-icon {
  background: linear-gradient(135deg,#0878bd,#074d82);
  color: #fff;
  box-shadow: 0 2px 5px #0a4e8026;
}
.site-nav .add-only:hover {
  background: linear-gradient(115deg,#ffffff,#dceeff);
  border-color: #ffe58b;
  color: #104b77;
  box-shadow: 0 0 12px 2px #f7d66a66,0 5px 16px #0327424d;
  transform: none;
}
/* Small footer breathing room and site-wide Poppins. */
@media (min-width:761px) {
  .explorer .site-header {
    padding-bottom: 10px;
  }
}
body,button,input,select,textarea {
  font-family: Poppins,Arial,sans-serif;
}
#modal-content [style*="font-family"] {
  font-family: Poppins,Arial,sans-serif !important;
}
/* One overall Leaderbird ranking and a discreet staff identifier. */
.participant-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.staff-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid #efc18e;
  border-radius: 12px;
  background: #fff0da;
  color: #914709;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  white-space: nowrap;
}
.participant-name .staff-badge {
  margin-left: 0;
}
#guide-modal.resource-modal {
  width: min(850px,95vw);
  height: 82.5dvh;
  min-height: 0;
  max-height: calc(100dvh - 48px);
}
@media (max-width:760px) {
  #guide-modal.resource-modal {
    width: 95vw;
    height: 82.5dvh;
    max-height: calc(100dvh - 32px);
  }
}
/* Header mailing-list action: yellow sampled from the Big Year logo. */
.workspace-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
}
.workspace-header .account-controls {
  justify-self: end;
}
.mailing-list-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid #dbcd08;
  border-radius: 8px;
  background: #faeb09;
  color: #103a5b;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(16,58,91,.1);
}
.mailing-list-button:hover {
  background: #f0df08;
  color: #103a5b;
  transform: none;
  text-decoration: none;
}
.mailing-list-button:focus-visible {
  outline: 3px solid #0879be;
  outline-offset: 3px;
}
.mailing-list-button svg {
  flex-shrink: 0;
}
@media (max-width:700px) {
  .workspace-header {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
  }
  .workspace-header .account-controls {
    grid-column: 2;
    grid-row: 1;
  }
  .mailing-list-button {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: center;
    padding: 7px 13px;
  }
}
.password-modal {
  width: min(540px,calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
}
.password-content {
  padding: 24px;
  overflow: auto;
}
.password-modal .modal-header h2 {
  font-size: 21px;
}
.password-modal .profile-edit-form {
  margin: 0;
}
/* Compact secondary dialogs and profile grouping. */
dialog.password-modal,dialog.avatar-crop-modal {
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 32px);
  width: min(540px,calc(100vw - 32px));
  padding: 0;
}
dialog.password-modal[open],dialog.avatar-crop-modal[open] {
  height: fit-content;
  min-height: 0;
}
.password-content,.crop-content {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
}
.profile-names {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.profile-approval-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: #f1f7fc;
  border-radius: 7px;
}
#modal-content .profile-approval-row p {
  margin: 0;
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
}
.profile-approval-row button {
  flex-shrink: 0;
}
#change-password {
  background: #eaf3fc;
  border-color: #c4daef;
  justify-self: start;
}
#change-password:hover {
  background: #dcecf9;
}
.crop-content {
  padding: 20px 24px;
  display: grid;
  gap: 12px;
}
.crop-content canvas {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: auto;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.crop-content canvas:active {
  cursor: grabbing;
}
.crop-content p {
  font-size: 12px;
  text-align: center;
  margin: 0;
}
.crop-content label {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  font-size: 12px;
}
.crop-content input {
  width: 100%;
  padding: 0;
  accent-color: #076bb8;
}
.crop-content .actions {
  justify-content: center;
}
@media (max-width:540px) {
  .profile-names {
    grid-template-columns: 1fr;
  }
  .profile-approval-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Discuss: responsive conversations, without nested page scrolling. */
.discussion-layout {
  width: min(880px,100%);
  margin: 0 auto;
}
.discussion-composer {
  margin-bottom: 22px;
}
.discussion-composer h2 {
  font-size: 18px;
  margin: 0 0 14px;
}
.discussion-layout textarea,#discussion-edit-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 84px;
  max-height: 300px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: white;
}
.discussion-compose-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
}
.discussion-photo-label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.discussion-compose-actions>span {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}
.discussion-compose-actions button {
  min-width: 85px;
}
.discussion-layout .form-message:empty {
  display: none;
}
.discussion-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 0 0 20px;
}
.discussion-filters label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}
.discussion-filters label:first-child {
  flex: 1;
}
.discussion-filters input {
  width: 100%;
}
.discussion-post {
  margin-bottom: 18px;
  padding: 22px;
}
.discussion-author {
  display: flex;
  gap: 11px;
  align-items: center;
}
.discussion-author strong {
  font-size: 13px;
}
.discussion-date {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.discussion-tools {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.discussion-tools button {
  padding: 5px 8px;
  font-size: 11px;
  background: transparent;
  border-color: transparent;
}
.discussion-tools button:hover {
  background: #edf5fc;
}
.discussion-tools [data-action^=delete] {
  color: #ac3541;
}
.discussion-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.7;
  margin: 16px 0;
}
.discussion-body:empty {
  display: none;
}
.discussion-image-button {
  display: block;
  width: 100%;
  background: #f0f5f9;
  border: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}
.discussion-image-button img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}
.discussion-post-actions {
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
}
.discussion-post-actions button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border-color: transparent;
  background: transparent;
  padding: 7px 10px;
  font-size: 12px;
}
.discussion-post-actions button:hover {
  background: #edf5fc;
}
.discussion-post-actions button[aria-pressed=true] {
  color: #ba3448;
  background: #fff0f2;
}
.discussion-post-actions .nav-icon {
  width: 17px;
  height: 17px;
}
.discussion-replies {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.discussion-replies[hidden] {
  display: none;
}
.discussion-comment {
  padding: 14px;
  background: #f3f8fd;
  border-radius: 8px;
  margin-bottom: 10px;
}
.discussion-comment .avatar {
  width: 30px;
  height: 30px;
}
.discussion-comment .discussion-body {
  margin: 10px 0 0;
  font-size: 13px;
}
.discussion-reply-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  margin-top: 14px;
}
.discussion-reply-form textarea {
  min-height: 66px;
  font-size: 13px;
}
.discussion-reply-form .form-message {
  grid-column: 1/-1;
}
.discussion-more-comments {
  font-size: 12px;
  background: white;
}
.discussion-photo-preview {
  position: relative;
  width: 180px;
  margin-top: 12px;
}
.discussion-photo-preview img {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 6px;
}
.discussion-photo-preview button {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: white;
}
.discussion-empty {
  text-align: center;
  padding: 25px;
  color: var(--muted);
}
#discussion-sentinel {
  min-height: 1px;
}
.discussion-full-image {
  display: block;
  width: auto;
  margin: auto;
  object-fit: contain;
  max-height: 70dvh;
}
.button.danger {
  background: #ad2638;
  border-color: #ad2638;
  color: white;
}
#guide-modal.discuss-modal {
  height: auto;
  min-height: 0;
  width: min(720px,95vw);
  max-height: 90dvh;
}
#discussion-edit-form {
  display: grid;
  gap: 14px;
}
@media (max-width:600px) {
  .discussion-post,.discussion-composer {
    padding: 16px;
  }
  .discussion-filters {
    flex-wrap: wrap;
  }
  .discussion-filters label:first-child {
    flex-basis: 100%;
  }
  .discussion-filters label:nth-child(2) {
    flex: 1;
  }
  .discussion-author {
    flex-wrap: wrap;
  }
  .discussion-author>div:not(.discussion-tools) {
    flex: 1;
  }
  .discussion-tools {
    gap: 0;
  }
  .discussion-tools button {
    padding: 4px;
  }
  .discussion-compose-actions {
    gap: 8px;
  }
  .discussion-compose-actions>span {
    font-size: 10px;
  }
  .discussion-reply-form {
    grid-template-columns: 1fr;
  }
  .discussion-reply-form>button {
    justify-self: end;
  }
  .discussion-photo-label {
    padding: 8px;
  }
}
/* Shared search/results geometry across My Birds, Leaderbird and Species Seen. */
.listing-layout .listing-filters {
  display: grid;
  grid-template-columns: minmax(0,1fr) 170px 120px;
  align-items: end;
  gap: 16px;
  margin: 0 0 22px;
}
.listing-filters>label,.listing-search {
  display: grid;
  grid-template-rows: 28px 46px;
  gap: 6px;
  min-width: 0;
}
.listing-filters>label {
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
}
.listing-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.listing-label-row label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
  min-width: 0;
}
.listing-layout .listing-filters input,.listing-layout .listing-filters select {
  width: 100%;
  min-width: 0;
  height: 46px;
  font-size: 15px;
  line-height: 24px;
  padding: 10px 12px;
}
.listing-export {
  padding: 2px 0;
  min-height: 0;
  line-height: 24px;
  font-size: 12px;
  font-weight: 600;
  color: #076bb8;
  border: 0;
  background: transparent;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.listing-layout #list-results {
  font-size: 15px;
}
.listing-layout th {
  font-size: 13px;
  line-height: 1.5;
}
.listing-layout td {
  font-size: 15px;
  line-height: 1.55;
}
.listing-layout .rank-number {
  font-size: 14px;
  width: 28px;
  height: 28px;
}
.listing-layout .species-name {
  font-size: 15px;
}
@media (max-width:760px) {
  .listing-layout .listing-filters {
    grid-template-columns: minmax(0,1fr) 120px;
    gap: 12px;
  }
  .listing-search {
    grid-column: 1/-1;
  }
  .listing-layout table.responsive td {
    font-size: 15px;
  }
  .listing-layout table.responsive td:not(:first-child):before {
    font-size: 13px;
  }
}
.data-refresh-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: #fff6df;
  border: 1px solid #e7d39e;
  border-radius: 7px;
  font-size: 12px;
}
.data-refresh-status button {
  padding: 5px 10px;
  background: white;
}
/* Discuss toolbar and modal composer. */
.discussion-filters input,.discussion-filters select,.discussion-filters>button {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 22px;
  padding: 10px 12px;
}
#discussion-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
#discussion-create .nav-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
#discussion-compose textarea {
  width: 100%;
  min-height: 150px;
  max-height: 340px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
#discussion-compose .form-message:empty {
  display: none;
}
#discussion-compose .discussion-photo-preview img {
  height: auto;
  max-height: 180px;
}
@media (max-width:600px) {
  .discussion-filters>button {
    flex: 1;
  }
  .discussion-filters label:nth-child(2) {
    flex-basis: 100%;
  }
  .discussion-compose-actions {
    flex-wrap: wrap;
  }
}
/* Fixed composer footprint with room reserved for an attachment. */
#guide-modal.create-post-modal[open] {
  width: min(720px,calc(100vw - 32px));
  height: 520px;
  min-height: 0;
  max-height: calc(100dvh - 32px);
}
#guide-modal.create-post-modal #modal-content {
  flex: 1;
  min-height: 0;
  padding: 22px 26px;
  overflow-y: auto;
}
#discussion-compose #discussion-photo-preview {
  min-height: 172px;
  padding-top: 12px;
}
#discussion-compose .discussion-photo-preview {
  margin-top: 0;
  width: 200px;
}
#discussion-compose .discussion-photo-preview img {
  height: 160px;
  max-height: 160px;
  object-fit: contain;
  object-position: left center;
}
.discussion-post-actions button[data-action="like"],.discussion-post-actions button[data-action="replies"] {
  display: grid;
  grid-template-columns: 16px 3ch minmax(0,1fr);
  column-gap: 4px;
  align-items: center;
  justify-content: start;
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  flex: 0 0 112px;
  height: 36px;
  padding: 7px 8px;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
}
.discussion-post-actions .discussion-action-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
}
.discussion-post-actions .discussion-action-label {
  text-align: left;
  min-width: 0;
}
.discussion-post-actions button .nav-icon {
  width: 16px;
  height: 16px;
  transform: none;
}
@media (max-width:380px) {
  .discussion-post-actions {
    gap: 6px;
  }
}
.workspace-content>.site-footer {
  text-align: right;
}
.discussion-post-actions button[data-action="replies"] {
  border: 1px solid #b5cee3;
}
#guide-modal.delete-confirm-modal[open] {
  width: min(480px,calc(100vw - 32px));
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - 32px);
}
#guide-modal.delete-confirm-modal #modal-content {
  flex: 0 1 auto;
  padding: 20px 24px;
  min-height: 0;
}
#guide-modal.delete-confirm-modal #discussion-edit-form {
  gap: 16px;
}
#guide-modal.delete-confirm-modal #discussion-edit-form p {
  margin: 0;
}
#guide-modal.delete-confirm-modal .form-message:empty {
  display: none;
}
/* Administrator workspace and shared-dialog forms. */
.admin-layout {
  width: 100%;
  margin: auto;
}
.admin-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.admin-tabs button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: white;
  font-weight: 600;
}
.admin-tabs button[aria-pressed=true] {
  background: #dceefa;
  border-color: #7daed2;
  color: #075b9e;
}
.admin-filters {
  display: flex;
  align-items: end;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.admin-filters label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.admin-filters label:first-child {
  flex: 1;
  min-width: 180px;
}
.admin-filters input,.admin-filters select,.admin-filters>button {
  min-height: 44px;
}
.admin-filters input {
  width: 100%;
}
.admin-table {
  min-width: 1050px;
}
.admin-table th,.admin-table td {
  padding: 10px 12px;
  font-size: 12px;
}
.admin-table td {
  font-weight: 400;
}
.admin-name {
  border: 0;
  background: transparent;
  color: #076bb8;
  font-weight: 600;
  padding: 0;
  text-align: left;
}
.admin-badge {
  display: block;
  font-size: 9px;
  color: #986000;
}
.admin-row-actions {
  display: flex;
  gap: 5px;
  white-space: nowrap;
}
.admin-row-actions button {
  font-size: 11px;
  padding: 5px 7px;
}
.danger-text {
  color: #a52a3c;
}
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
  font-size: 12px;
}
.admin-rarities {
  min-width: 640px;
}
.admin-rarities td,.admin-rarities th {
  font-size: 13px;
  padding: 10px 14px;
}
.admin-rarities small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.admin-rarities select {
  width: 100%;
  min-width: 100px;
}
.rarity-changed {
  background: #fff9df;
}
.admin-user-modal .profile-edit-form select {
  width: 100%;
  min-width: 0;
}
.admin-user-modal .profile-edit-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
#guide-modal.admin-user-modal[open] {
  width: min(760px,95vw);
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - 32px);
}
#guide-modal.admin-user-modal #modal-content {
  flex: 0 1 auto;
  overflow-y: auto;
}
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff3d0;
  border: 1px solid #e3c779;
  padding: 10px 15px;
  margin-bottom: 20px;
  border-radius: 7px;
  font-size: 13px;
}
.impersonation-banner button {
  font-weight: 600;
}
.admin-layout .form-message:empty,#admin-confirm-form .form-message:empty {
  display: none;
}
#admin-confirm-form .actions {
  margin-top: 18px;
}
@media (max-width:600px) {
  .admin-filters label:first-child {
    flex-basis: 100%;
  }
  .admin-tabs {
    gap: 8px;
  }
  .admin-tabs button {
    font-size: 13px;
    padding: 9px 12px;
  }
  .impersonation-banner {
    flex-direction: column;
    align-items: start;
  }
}
.admin-more-birds {
  display: block;
  margin: 18px auto;
  background: white;
}
/* Bird tip administration uses the shared dialog and existing tip presentation. */
.admin-tabs {
  flex-wrap: wrap;
}
.admin-tip-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #c8ddef;
}
.admin-tip-card>div {
  min-width: 0;
}
.admin-tip-card h3 {
  margin: 0 0 8px;
}
.admin-tip-card button {
  flex-shrink: 0;
}
.admin-tip-card p {
  margin: 8px 0;
}
.admin-tip-excerpt {
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#admin-tip-form textarea {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  font: inherit;
  padding: 12px;
  border: 1px solid #c8ddef;
  border-radius: 6px;
}
.tip-summary {
  white-space: pre-line;
}
@media (max-width:600px) {
  .admin-tip-card {
    gap: 12px;
  }
  .admin-tabs button {
    flex: 1 1 auto;
  }
}
/* Profile photo is the upload control; keep crop/upload behavior unchanged. */
.profile-avatar-picker {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.profile-avatar-picker #profile-avatar-preview {
  display: block;
}
.profile-avatar-placeholder {
  display: grid;
  place-items: center;
  background: #e1effc;
  color: #17639a;
}
.profile-avatar-placeholder>.nav-icon {
  width: 40px;
  height: 40px;
}
.avatar-camera {
  position: absolute;
  right: -2px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid white;
  border-radius: 50%;
  background: #096bb1;
  color: white;
  pointer-events: none;
}
.avatar-camera>.nav-icon {
  width: 15px;
  height: 15px;
}
.profile-avatar-picker:hover .avatar-camera {
  background: #084c80;
}
.profile-avatar-picker:hover .profile-avatar {
  box-shadow: 0 0 0 2px #1687dd;
}
.profile-avatar-picker:focus-visible {
  outline: 3px solid #1687dd;
  outline-offset: 5px;
}
.discussion-post-actions button[data-action="replies"]:hover,.discussion-post-actions button[data-action="replies"]:focus-visible {
  background: #dcecfb;
  border-color: #6a9fc9;
  color: #064f88;
}
.discussion-reply-form button[type="submit"]:hover {
  background: #07558d;
  border-color: #07558d;
}
.leaders-panel [data-live-standings] {
  padding-top: 18px;
}
/* Like feedback stays visible for both unliked and already-liked posts. */
.discussion-post-actions button[data-action="like"]:hover,.discussion-post-actions button[data-action="like"]:focus-visible {
  background: #ffe1e7;
  border-color: #dc93a2;
  color: #a71f3b;
}
.discussion-post-actions button[data-action="like"][aria-pressed="true"]:hover,.discussion-post-actions button[data-action="like"][aria-pressed="true"]:focus-visible {
  background: #f9cbd5;
  border-color: #cc7185;
  color: #931a33;
}
.discussion-post-actions button[data-action="like"][aria-pressed="true"] .nav-icon {
  fill: currentColor;
}
/* Compact event countdown within the welcome copy on both homepages. */
.big-year-countdown {
  margin-top: 22px;
  max-width: 350px;
}
.countdown-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .035em;
  color: #315a7b;
  margin-bottom: 9px;
}
.countdown-spark {
  color: #b18108;
  font-size: 18px;
  line-height: 1;
}
.countdown-tiles {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}
.countdown-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 8px 5px;
  border: 1px solid #196fab;
  border-radius: 9px;
  background: linear-gradient(145deg,#12598c,#087ab7);
  color: white;
  box-shadow: 0 3px 8px #0c548314,inset 0 1px 0 #ffffff24;
}
.countdown-tile:first-child {
  background: linear-gradient(135deg,#ffe38a,#f4ce50);
  border-color: #ebc650;
  color: #153c5b;
}
.countdown-tile strong {
  font-size: 25px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .015em;
  font-variant-numeric: tabular-nums;
}
.countdown-tile>span {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.big-year-countdown .countdown-date {
  font-size: 10px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.5;
}
@media (max-width:480px) {
  .big-year-countdown {
    margin-top: 18px;
    max-width: 310px;
  }
  .countdown-tiles {
    gap: 7px;
  }
  .countdown-tile {
    min-height: 62px;
  }
  .countdown-tile strong {
    font-size: 23px;
  }
}
/* Before the event, the Overview KPI strip becomes the countdown. */
.big-year-countdown.countdown-banner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,440px);
  grid-template-rows: auto auto;
  column-gap: 32px;
  align-items: center;
  max-width: none;
  margin: 22px 0 26px;
  padding: 20px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(110deg,#103f69,#08699b);
  border-color: #155780;
  color: white;
}
.countdown-banner .countdown-heading {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.015em;
  margin: 0;
  gap: 10px;
  color: #075b9e;
}
.countdown-banner .countdown-spark {
  font-size: 25px;
}
.countdown-banner .countdown-date {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 6px 0 0 30px;
  font-size: 12px;
}
.countdown-banner .countdown-tiles {
  grid-column: 2;
  grid-row: 1/3;
  gap: 12px;
}
.countdown-banner .countdown-tile {
  min-height: 76px;
}
.countdown-banner .countdown-tile strong {
  font-size: 30px;
}
.countdown-banner .countdown-tile>span {
  font-size: 10px;
}
@media (max-width:1100px) {
  .big-year-countdown.countdown-banner {
    grid-template-columns: minmax(0,1fr) minmax(260px,340px);
    gap: 8px 20px;
    padding: 20px;
  }
  .countdown-banner .countdown-heading {
    font-size: 16px;
  }
  .countdown-banner .countdown-tiles {
    gap: 8px;
  }
}
@media (max-width:760px) {
  .big-year-countdown.countdown-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    text-align: center;
  }
  .countdown-banner .countdown-heading {
    align-self: center;
    justify-content: center;
  }
  .countdown-banner .countdown-date {
    align-self: center;
    order: 3;
  }
  .countdown-banner .countdown-tiles {
    width: 100%;
    max-width: 380px;
  }
  .countdown-banner .countdown-tile {
    min-height: 68px;
  }
  .countdown-banner .countdown-tile strong {
    font-size: 26px;
  }
}
/* Give the event countdown its own visual emphasis. */
.countdown-banner .countdown-heading {
  color: #fff;
}
.countdown-banner .countdown-date {
  color: #d4e8f7;
}
.countdown-banner .countdown-spark {
  color: #ffda62;
}
.countdown-banner .countdown-tile:not(:first-child) {
  background: #ffffff14;
  border-color: #ffffff52;
  box-shadow: inset 0 1px 0 #ffffff1f;
  color: #fff;
}
/* Site help stays available beside the account menu on signed-in pages. */
.header-help {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #b7d3e9;
  border-radius: 50%;
  background: #f2f8fd;
  color: #075b9e;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.header-help:hover {
  background: #dcecfb;
  border-color: #6a9fc9;
}
.header-help:focus-visible {
  outline: 3px solid #1687dd;
  outline-offset: 3px;
}
/* First-login guidance retains the steady action highlight. */
.site-nav .add-only.observation-coach-glow {
  border-color: #ffe58b;
  animation: none;
}
.observation-coach {
  position: fixed;
  z-index: 90;
  width: min(320px,calc(100vw - 24px));
  padding: 23px 40px 23px 24px;
  background: #fff3a6;
  border: 1px solid #c5a94b;
  border-radius: 9px;
  box-shadow: 0 8px 22px #082b4652,0 2px 5px #082b4626;
  color: #153452;
}
.observation-coach:before,.observation-coach:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
  pointer-events: none;
}
.observation-coach[data-side="left"]:before {
  left: -16px;
  top: calc(50% - 14px);
  border-width: 14px 16px 14px 0;
  border-right-color: #c5a94b;
}
.observation-coach[data-side="left"]:after {
  left: -14px;
  top: calc(50% - 13px);
  border-width: 13px 15px 13px 0;
  border-right-color: #fff3a6;
}
.observation-coach[data-side="top"]:before {
  top: -16px;
  left: calc(var(--tail-x) - 14px);
  border-width: 0 14px 16px;
  border-bottom-color: #c5a94b;
}
.observation-coach[data-side="top"]:after {
  top: -14px;
  left: calc(var(--tail-x) - 13px);
  border-width: 0 13px 15px;
  border-bottom-color: #fff3a6;
}
.observation-coach[data-side="bottom"]:before {
  bottom: -16px;
  left: calc(var(--tail-x) - 14px);
  border-width: 16px 14px 0;
  border-top-color: #c5a94b;
}
.observation-coach[data-side="bottom"]:after {
  bottom: -14px;
  left: calc(var(--tail-x) - 13px);
  border-width: 15px 13px 0;
  border-top-color: #fff3a6;
}
.observation-coach h2 {
  font-size: 17px;
  margin: 0 0 7px;
  color: #075b9e;
}
.observation-coach p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.observation-coach-close {
  position: absolute;
  right: 5px;
  top: 5px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #426077;
}
.observation-coach-close:hover {
  background: #f4df82;
}
@media (prefers-reduced-motion:reduce) {
  .site-nav .add-only.observation-coach-glow {
    animation: none;
    box-shadow: 0 0 0 2px #ffdb69c0,0 0 9px 2px #ffdc6966;
  }
}
.observation-coach:focus {
  outline: none;
}
.observation-coach-close:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
/* Help has a stable footprint even while the web font is loading. */
#guide-modal.welcome-help-modal {
  width: min(680px,calc(100vw - 32px));
  height: min(560px,calc(100svh - 32px));
  min-height: 0;
  max-height: calc(100svh - 32px);
}
#guide-modal.welcome-help-modal .modal-header {
  flex: 0 0 80px;
  height: 80px;
  box-sizing: border-box;
}
#guide-modal.welcome-help-modal #modal-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
/* Public home: welcome at left, live login at right, countdown below both. */
.public-top-grid {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(320px,1fr);
  gap: 24px;
}
.hero.public-welcome {
  display: flex;
  min-height: 0;
}
.public-welcome .hero-copy {
  width: 100%;
  align-self: center;
  padding: 30px;
}
.public-welcome .hero-copy>p {
  max-width: 680px;
}
.public-welcome .hero-copy h1 {
  margin-top: 0;
}
.public-top-grid .login-panel {
  margin: 0;
  grid-row: auto;
  gap: 12px;
}
.public-about {
  margin-top: 24px;
}
@media (max-width:1000px) {
  .public-top-grid {
    grid-template-columns: minmax(0,1.25fr) minmax(290px,1fr);
    gap: 20px;
  }
  .public-welcome .hero-copy {
    padding: 24px;
  }
}
@media (max-width:760px) {
  .public-top-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .public-top-grid .login-panel {
    grid-row: auto;
  }
  .public-welcome .hero-copy {
    padding: 24px;
  }
  .public-about {
    margin-top: 20px;
  }
}
/* Font failures use one consistent fallback for the entire document. */
html.font-fallback body.explorer,html.font-fallback body.explorer * {
  font-family: Arial,sans-serif !important;
}
/* Public landing page: three aligned cards, followed by copy and prize partners. */
.public-top-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch;
}
.public-top-grid>.panel,.public-top-grid>.hero {
  height: 100%;
  min-width: 0;
}
.public-top-grid .public-welcome .hero-copy {
  padding: 26px;
}
.public-top-grid .public-welcome h1 {
  font-size: clamp(26px,2vw,32px);
}
.public-targets h2 {
  margin-bottom: 20px;
}
.public-target-list {
  display: grid;
  gap: 16px;
}
.public-target-list figure {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  min-width: 0;
}
.public-target-list img {
  display: block;
  flex: 0 0 100px;
  width: 100px;
  height: 76px;
  object-fit: cover;
  border-radius: 6px;
}
.public-target-list figcaption {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.public-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
.public-bottom-grid .public-about {
  margin-top: 0;
}
.public-bottom-grid .panel>:last-child {
  margin-bottom: 0;
}
.public-partner-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
  margin-top: 28px;
}
.public-partner-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 310px;
  min-height: 125px;
  border-radius: 8px;
  padding: 10px;
}
.public-partner-logos a:hover {
  background: #f2f7fc;
}
.public-partner-logos img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 125px;
  object-fit: contain;
}
@media (max-width:1200px) {
  .public-top-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .public-top-grid>.public-welcome {
    grid-column: 1/-1;
  }
  .public-bottom-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
  }
  .public-bottom-grid>.public-about {
    grid-column: 1/-1;
  }
}
@media (max-width:760px) {
  .public-top-grid,.public-bottom-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .public-top-grid>.public-welcome {
    grid-column: auto;
  }
  .public-top-grid>.panel,.public-top-grid>.hero {
    height: auto;
  }
  .public-bottom-grid {
    margin-top: 20px;
  }
  .public-top-grid .public-welcome .hero-copy {
    padding: 24px;
  }
}
@media (max-width:760px) {
  .public-bottom-grid>.public-about {
    grid-column: auto;
  }
}
/* Public event banner precedes the cards, with a shorter desktop footprint. */
:is(.public-countdown,.overview-countdown):empty {
  display: none;
}
:is(.public-countdown,.overview-countdown) .big-year-countdown.countdown-banner {
  margin: 0 0 24px;
  padding: 14px 28px;
}
:is(.public-countdown,.overview-countdown) .countdown-banner .countdown-tile {
  min-height: 64px;
  padding: 6px 5px;
}
:is(.public-countdown,.overview-countdown) .countdown-banner .countdown-tile strong {
  font-size: 26px;
}
:is(.public-countdown,.overview-countdown) .countdown-banner .countdown-heading {
  font-size: 17px;
}
@media (max-width:760px) {
  :is(.public-countdown,.overview-countdown) .big-year-countdown.countdown-banner {
    padding: 14px 18px;
    margin-bottom: 20px;
    gap: 8px;
  }
  :is(.public-countdown,.overview-countdown) .countdown-banner .countdown-tile {
    min-height: 56px;
  }
  :is(.public-countdown,.overview-countdown) .countdown-banner .countdown-tile strong {
    font-size: 23px;
  }
  :is(.public-countdown,.overview-countdown) .countdown-banner .countdown-heading {
    font-size: 16px;
  }
}
/* One introduction spans the two rows of public cards. */
.public-content-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-areas: "introduction login targets" "introduction partners winners";
  gap: 24px;
  align-items: stretch;
}
.public-content-grid>.panel {
  min-width: 0;
}
.public-content-grid>.public-introduction {
  grid-area: introduction;
}
.public-introduction h1 {
  font-size: clamp(26px,2vw,32px);
  margin: 0 0 24px;
}
.public-introduction p:last-child {
  margin-bottom: 0;
}
.public-content-grid>.login-panel {
  grid-area: login;
  gap: 12px;
  margin: 0;
}
.public-content-grid>.public-targets {
  grid-area: targets;
}
.public-content-grid>.public-prize-partners {
  grid-area: partners;
}
.public-content-grid>.public-prize-winners {
  grid-area: winners;
}
@media (max-width:1200px) {
  .public-content-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-areas: "introduction introduction" "login targets" "partners winners";
    gap: 20px;
  }
}
@media (max-width:760px) {
  .public-content-grid {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "introduction" "login" "targets" "partners" "winners";
  }
}
/* Distinguish the sign-in card from surrounding informational panels. */
.public-content-grid>.login-panel {
  background: linear-gradient(135deg,#fffdf5,#fff3cd);
  border-color: #dfc369;
  box-shadow: 0 5px 18px #80631c14;
}
.login-panel .login-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #153452;
}
.login-heading-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #e6c44d;
  border-radius: 9px;
  background: #f9dc75;
  color: #164e79;
}
.login-heading-icon svg {
  width: 21px;
  height: 21px;
}
.public-content-grid>.login-panel input {
  background: #fff;
  border-color: #b9cddd;
}
.public-content-grid>.login-panel input:focus {
  border-color: #1687dd;
}
/* Retain section spacing when the countdown is above the Overview hero. */
.hero-overview + .home-grid {
  margin-top: 24px;
}
/* Registration preserves consent and account creation inside the shared modal. */
#guide-modal.registration-modal {
  width: min(760px,calc(100vw - 32px));
  height: var(--registration-height,fit-content);
  max-height: calc(100svh - 32px);
  min-height: 0;
}
#guide-modal.registration-modal #modal-content {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#registration-form fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}
#registration-form [hidden] {
  display: none !important;
}
#registration-form legend {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.registration-terms {
  border: 1px solid var(--line);
  border-radius: 7px;
  margin: 12px 0;
  background: #f5f9fd;
}
.registration-terms summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 14px;
}
.registration-terms>div {
  padding: 0 16px 16px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
#registration-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0;
}
#registration-form input:not([type=checkbox]),#registration-form select {
  width: 100%;
  min-width: 0;
}
#registration-form .registration-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.6;
}
.registration-check input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
}
.registration-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.registration-privacy,#registration-parent p {
  font-size: 12px;
  color: var(--muted);
}
#registration-message:empty {
  display: none;
}
#registration-form .actions {
  margin: 18px 0 12px;
}
@media (max-width:500px) {
  .registration-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* Links should not stretch across the login card. */
.login-panel>a {
  align-self: flex-start;
  width: fit-content;
}
/* Compact participant details into four paired rows on desktop. */
#guide-modal.registration-modal #modal-content {
  padding: 18px 24px;
}
#registration-details legend {
  margin-bottom: 8px;
}
#registration-details label {
  margin: 7px 0;
  gap: 4px;
  line-height: 1.4;
}
#registration-details input:not([type=checkbox]),#registration-details select {
  height: 40px;
  padding: 7px 10px;
  font-size: 13px;
}
#registration-details .registration-fields {
  gap: 14px;
}
#registration-details .registration-privacy {
  font-size: 11px;
  line-height: 1.5;
  margin: 12px 0;
}
.registration-parent-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 2px 0 10px;
}
#registration-details .actions {
  margin: 12px 0 8px;
}
#registration-details>a {
  display: inline;
  width: auto;
  font-size: 12px;
}
@media (max-width:500px) {
  #registration-details .registration-fields {
    gap: 0;
  }
  #guide-modal.registration-modal #modal-content {
    padding: 16px 18px;
  }
}
/* Compact account recovery; no reserved empty modal height. */
#guide-modal.request-password-modal {
  width: min(520px,calc(100vw - 32px));
  height: fit-content;
  min-height: 0;
  max-height: calc(100svh - 32px);
}
#password-request-form {
  margin: 0;
}
#password-request-form>p:first-child {
  margin-top: 0;
}
#password-request-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}
#password-request-form input {
  width: 100%;
  margin-bottom: 18px;
}
#recovery-message:empty {
  display: none;
}
#recovery-message {
  font-size: 14px;
}
/* Keep a little breathing room below either registration step. */
#guide-modal.registration-modal #modal-content {
  padding-bottom: 28px;
}
/* Reserve the same status area before and after a recovery response. */
#password-request-form .recovery-status {
  height: 100px;
  overflow: auto;
  margin: 0 0 12px;
}
#password-request-form #recovery-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
/* Purpose-built mobile shell: fixed header and bottom navigation, scrolling content. */
.mobile-bottom-nav,.mobile-mailing-button,.mobile-tins-link {
  display: none;
}
@media (max-width:760px) {
  .explorer #app {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto minmax(0,1fr) auto;
  }
  .explorer .site-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    grid-row: 1;
    grid-column: 1;
    height: auto;
    max-height: none;
    min-height: 70px;
    padding: 10px 14px;
    overflow: visible;
    background: #0b4878;
  }
  .explorer .site-header>.brand {
    width: 112px;
    flex: 0 0 112px;
    padding: 6px 8px;
    border-radius: 7px;
  }
  .explorer .site-header>.site-nav,.explorer .site-header>.tins-link,.mobile-toggle {
    display: none !important;
  }
  .site-header .mobile-mailing-button {
    display: inline-flex;
    grid-area: auto;
    font-size: 11px;
    padding: 7px 10px;
    gap: 6px;
    min-height: 40px;
    max-width: 190px;
    line-height: 1.35;
    text-align: center;
  }
  .mobile-mailing-button svg {
    width: 16px;
    height: 16px;
  }
  .explorer .workspace-header {
    grid-column: 1;
    grid-row: 2;
    min-height: 52px;
    padding: 8px 14px;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
  }
  .workspace-header>.mailing-list-button {
    display: none;
  }
  .workspace-header h1 {
    font-size: 18px;
    grid-template-columns: 20px minmax(0,1fr);
    gap: 8px;
  }
  .workspace-header h1>.nav-icon {
    width: 20px;
    height: 20px;
    transform: none;
  }
  .workspace-header .account-controls {
    grid-row: 1;
    grid-column: 2;
    gap: 8px;
  }
  .account-name {
    display: none;
  }
  .account-button {
    padding: 2px;
  }
  .account-button .avatar {
    width: 30px;
    height: 30px;
  }
  .header-help {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 16px;
  }
  .workspace-content {
    grid-column: 1;
    grid-row: 3;
  }
  .workspace-content>.page {
    padding: 14px 12px 22px;
  }
  .workspace-content>.site-footer {
    padding: 0;
    border: 0;
    background: linear-gradient(125deg,#0b3d68,#10699f);
  }
  .site-footer>span {
    display: none;
  }
  .site-footer .mobile-tins-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    padding: 20px 16px;
    margin: 0;
    border: 0;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    gap: 14px;
    text-align: left;
  }
  .site-footer .mobile-tins-link img {
    width: 48px;
    height: 48px;
  }
  .mobile-bottom-nav {
    display: grid;
    grid-column: 1;
    grid-row: 4;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 3px;
    align-items: stretch;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #bdd5e7;
    box-shadow: 0 -3px 16px #14375512;
    z-index: 24;
  }
  .mobile-bottom-nav.public-mobile-nav {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .mobile-bottom-nav>a,.mobile-bottom-nav>button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 2px;
    min-height: 52px;
    min-width: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #23516f;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    transform: none;
  }
  .mobile-bottom-nav .nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .mobile-bottom-nav [aria-current=page],.mobile-bottom-nav .is-current {
    background: #fff0b8;
    font-weight: 600;
  }
  .mobile-bottom-nav>a:hover,.mobile-bottom-nav>button:hover {
    background: #edf5fc;
    transform: none;
  }
  .mobile-bottom-nav .mobile-add-observation {
    background: #eaf5ff;
    color: #075b94;
    font-weight: 600;
  }
  .mobile-add-observation .nav-icon {
    background: #076bb0;
    color: white;
    border-radius: 50%;
    padding: 3px;
  }
  .mobile-add-observation.observation-coach-glow {
    animation: none;
  }
  dialog.mobile-more-sheet[open] {
    width: calc(100% - 20px);
    max-width: 520px;
    height: fit-content;
    min-height: 0;
    max-height: calc(100dvh - 32px);
    margin: auto auto calc(78px + env(safe-area-inset-bottom));
    padding: 0;
  }
  .mobile-more-sheet nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
  }
  .mobile-more-sheet nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    background: #f5f9fd;
  }
  .mobile-more-sheet nav a[aria-current=page] {
    background: #fff0b8;
    border-color: #e5c868;
  }
  :is(.public-countdown,.overview-countdown) .big-year-countdown.countdown-banner {
    padding: 10px 12px;
    margin: 0 0 14px;
    gap: 6px;
    border-radius: 8px;
  }
  :is(.public-countdown,.overview-countdown) .countdown-banner .countdown-heading {
    font-size: 12px;
    line-height: 1.3;
    gap: 6px;
  }
  .countdown-banner .countdown-spark {
    font-size: 17px;
  }
  .countdown-banner .countdown-tiles {
    max-width: 290px;
    gap: 6px;
  }
  :is(.public-countdown,.overview-countdown) .countdown-banner .countdown-tile {
    min-height: 40px;
    padding: 4px;
    border-radius: 6px;
    box-shadow: none;
  }
  :is(.public-countdown,.overview-countdown) .countdown-banner .countdown-tile strong {
    font-size: 20px;
    line-height: 1;
  }
  .countdown-banner .countdown-tile>span {
    font-size: 8px;
    margin-top: 3px;
  }
  .countdown-banner .countdown-date {
    font-size: 9px;
    line-height: 1.25;
    margin: 0;
  }
  .public-content-grid {
    grid-template-areas: "login" "introduction" "targets" "partners" "winners";
    gap: 14px;
  }
  .public-content-grid>.login-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 16px;
  }
  .login-panel>.login-heading,.login-panel>#login-form {
    grid-column: 1/-1;
  }
  .login-panel .login-heading {
    font-size: 18px;
    gap: 8px;
    margin: 0;
  }
  .login-panel .login-heading-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .login-panel .login-heading-icon svg {
    width: 19px;
    height: 19px;
  }
  #login-form {
    gap: 4px;
  }
  #login-form label {
    font-size: 12px;
    margin: 0;
  }
  #login-form input {
    font-size: 16px;
    height: 42px;
    min-height: 42px;
    padding: 8px 10px;
    margin-bottom: 6px;
  }
  #login-form .button {
    min-height: 42px;
    padding: 8px 14px;
    margin: 0;
  }
  .login-panel>a:not(.button) {
    font-size: 12px;
    line-height: 1.4;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
  }
  .login-panel>a:last-child {
    justify-self: end;
  }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .mobile-add-observation.observation-coach-glow {
    animation: none;
    box-shadow: 0 0 0 2px #ffdb69c0;
  }
}
/* Mobile Overview and thumb-friendly floating observation action. */
@media (max-width:760px) {
  .overview-page .hero.hero-overview {
    grid-template-columns: minmax(0,1fr);
    min-height: 0;
  }
  .overview-page .hero-overview .hero-visual {
    display: none;
  }
  .overview-page .hero-overview .hero-copy {
    grid-column: 1;
    grid-row: 1;
    padding: 22px;
  }
  .overview-page .hero-overview .hero-tip {
    grid-column: 1;
    grid-row: 2;
    padding: 0 22px 22px;
    align-items: stretch;
  }
  .overview-page .hero-tip .tip-trigger,.overview-page .hero-donate {
    max-width: none;
  }
  .overview-page .home-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .overview-page .leaders-panel {
    display: none;
  }
  .mobile-bottom-nav {
    position: relative;
    grid-template-columns: repeat(6,minmax(0,1fr));
    background: #193f64;
    border-color: #2c5579;
    box-shadow: 0 -3px 14px #112d4824;
    gap: 2px;
  }
  .mobile-bottom-nav>a,.mobile-bottom-nav>button {
    color: #f1f7fc;
    font-size: 10px;
  }
  .mobile-bottom-nav>a:hover,.mobile-bottom-nav>button:hover {
    background: #2c567b;
    color: white;
  }
  .mobile-bottom-nav>.mobile-add-observation {
    position: absolute;
    right: 16px;
    bottom: calc(100% + 12px);
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg,#078fb4,#087e8c);
    color: #fff;
    border: 2px solid #f7d66a;
    box-shadow: 0 0 10px 2px #f7d66a55,0 4px 12px #123b5a40;
    z-index: 1;
  }
  .mobile-bottom-nav>.mobile-add-observation .nav-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    stroke-width: 1.8;
  }
  .mobile-bottom-nav>.mobile-add-observation:hover {
    background: #087e9a;
  }
  .mobile-bottom-nav>.mobile-add-observation:focus-visible {
    outline: 3px solid #f7d66a;
    outline-offset: 3px;
  }
  .overview-page .workspace-content>.page {
    padding-bottom: 76px;
  }
  .explorer:has(.mobile-add-observation) .site-footer .mobile-tins-link {
    padding-bottom: 76px;
  }
}
@media (max-width:360px) {
  .mobile-bottom-nav>a,.mobile-bottom-nav>button {
    font-size: 9px;
  }
}
/* One mobile header row: logo, centered mailing list, help/account. */
@media (max-width:760px) {
  .explorer .site-header {
    display: grid;
    grid-template-columns: 84px minmax(0,1fr) 84px;
    gap: 6px;
    padding: 10px;
  }
  .explorer .site-header>.brand {
    grid-column: 1;
    grid-row: 1;
    width: 84px;
    margin: 0;
    padding: 5px 6px;
  }
  .site-header .mobile-mailing-button {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
    min-width: 0;
    padding: 6px 7px;
    font-size: 10px;
    gap: 5px;
    min-height: 38px;
  }
  .site-header>.account-controls {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 8px;
    min-width: 0;
  }
  .site-header .header-help {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
  }
  .site-header .account-button {
    min-height: 36px;
    padding: 3px;
  }
  .site-header .account-menu {
    color: var(--ink);
  }
  .explorer .workspace-header {
    grid-template-columns: minmax(0,1fr);
    min-height: 46px;
  }
}
/* Compact mobile hero actions; desktop dimensions remain unchanged. */
@media (max-width:760px) {
  .overview-page .hero-overview .hero-tip {
    gap: 12px;
    align-items: center;
  }
  .overview-page .hero-tip .tip-trigger,.overview-page .hero-donate {
    width: 100%;
    max-width: 280px;
  }
  .overview-page .hero-donate button {
    min-height: 54px;
    padding: 8px 12px;
    gap: 10px;
    font-size: 16px;
  }
  .overview-page .hero-donate .donate-emblem {
    width: 30px;
    height: 30px;
    font-size: 23px;
    flex: 0 0 30px;
  }
  .overview-page .hero-donate .donate-caption {
    font-size: 8px;
  }
  .overview-page .hero-tip .tip-trigger {
    padding: 10px 12px;
    grid-template-columns: 28px minmax(0,1fr);
    column-gap: 9px;
    row-gap: 2px;
  }
  .overview-page .hero-tip .tip-emblem {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .overview-page .hero-tip .tip-emblem .nav-icon {
    width: 19px;
    height: 19px;
  }
  .overview-page .hero-tip .tip-label {
    gap: 1px;
  }
  .overview-page .hero-tip .tip-label strong {
    font-size: 13px;
  }
  .overview-page .hero-tip .tip-kicker {
    font-size: 7px;
  }
  .overview-page .hero-tip .tip-action {
    font-size: 11px;
  }
}
/* Lighter mobile navigation framing. */
@media (max-width:760px) {
  .mobile-bottom-nav {
    background: #082d4c;
    border-top-color: #194766;
    box-shadow: 0 -2px 10px #08243d26;
  }
  .mobile-bottom-nav>a,.mobile-bottom-nav>button {
    color: #edf6ff;
  }
  .mobile-bottom-nav>a:hover,.mobile-bottom-nav>button:hover {
    background: #174563;
    color: #fff;
  }
  .mobile-bottom-nav [aria-current=page],.mobile-bottom-nav .is-current {
    background: #f7d66a;
    color: #123d60;
  }
  .mobile-bottom-nav>.mobile-add-observation,.mobile-bottom-nav>.mobile-add-observation:hover {
    color: #fff;
  }
}
/* Member mobile pages end at the content, above bottom navigation. */
@media (max-width:760px) {
  .member-navigation .workspace-content>.site-footer {
    display: none;
  }
  .member-navigation .workspace-content>.page {
    padding-bottom: 80px;
  }
}
/* Consistent dropdown chevron inset across desktop and mobile forms. */
select:not([multiple]):not([size]),select[size="1"]:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23153452' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px 14px;
}
@media (forced-colors:active) {
  select:not([multiple]):not([size]),select[size="1"]:not([multiple]) {
    appearance: auto;
    background-image: none;
  }
}
.remove-sighting-button {
  font-size: 12px;
  padding: 7px 10px;
  color: #a52a3c;
  border-color: #e6bdc4;
  background: #fff7f8;
}
.remove-sighting-button:hover {
  background: #fbe7eb;
}
#remove-sighting-form>p {
  margin: 0 0 18px;
}
#remove-sighting-form .form-message:empty {
  display: none;
}
/* Observation search and compact, continuous results list. */
.observation-search-row {
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
}
#observation-search .rare-toggle {
  margin: 0;
  min-height: 44px;
  white-space: nowrap;
  font-size: 12px;
}
#observation-search .rare-toggle input {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
.observation-choices {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.observation-choices:empty {
  display: none;
}
.observation-choice {
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  grid-template-columns: minmax(0,1fr) 84px;
  gap: 2px 12px;
}
.observation-choice:last-child {
  border-bottom: 0;
}
.observation-choice:hover {
  background: #f6faff;
}
.observation-choice:has(input[name=bird]:checked) {
  background: #eef7ff;
  box-shadow: inset 3px 0 #1477c7;
}
.observation-select {
  gap: 10px;
  font-size: 15px;
  line-height: 1.35;
}
.observation-select>input {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin: 2px 0 0;
}
.observation-select small {
  font-size: 12px;
  line-height: 1.35;
}
#modal-content .observation-choice>img {
  width: 84px;
  height: 64px;
  max-width: 84px;
  object-fit: cover;
  border-radius: 5px;
}
.observation-bird-links {
  font-size: 11px;
  line-height: 1.4;
  padding-left: 34px;
  gap: 14px;
}
@media (max-width:560px) {
  .observation-search-row {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
  }
  .observation-search-row>.button {
    grid-column: 1/-1;
    height: 40px;
    min-height: 40px;
  }
  #observation-search .rare-toggle {
    font-size: 11px;
    gap: 6px;
  }
  #observation-search #bird-search {
    padding: 8px 10px;
    font-size: 16px;
  }
  .observation-choice {
    padding: 8px;
    column-gap: 8px;
  }
  .observation-select {
    gap: 8px;
  }
  .observation-bird-links {
    padding-left: 32px;
    gap: 10px;
  }
}
.observation-row-details {
  grid-column: 1/-1;
  grid-row: 3;
  display: block;
  margin: 8px 0 2px 34px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.observation-row-details[hidden] {
  display: none !important;
}
.observation-row-details>span {
  font-weight: 400;
  color: var(--muted);
}
.observation-row-details>input {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 40px;
  font-size: 14px;
}
.observation-choice .rare-notice {
  grid-row: 4;
}
@media (max-width:560px) {
  .observation-row-details {
    margin-left: 0;
  }
  .observation-row-details>input {
    font-size: 16px;
  }
}
/* Fixed observation footer mirrors the modal header; only results scroll. */
#guide-modal.observation-modal {
  overflow: hidden;
}
#guide-modal.observation-modal #modal-content {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}
#guide-modal.observation-modal #observation-search {
  flex: 0 0 auto;
}
#guide-modal.observation-modal>.observation-submit-bar {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 24px;
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-radius: 0;
  z-index: auto;
}
#modal-content .observation-already-added {
  color: #237544;
  font-weight: 700;
}
@media (max-width:760px) {
  #guide-modal.observation-modal>.observation-submit-bar {
    padding: 13px 16px;
  }
}
/* Selected rows have stronger fill and an inline details column on wider screens. */
.observation-choice:has(input[name=bird]:not(:disabled)) {
  cursor: pointer;
}
.observation-choice:has(input[name=bird]:checked) {
  background: #dcecf9;
  box-shadow: none;
}
.observation-row-details {
  cursor: default;
}
@media (min-width:640px) {
  .observation-choice {
    grid-template-columns: minmax(0,1fr) minmax(190px,.9fr) 84px;
    column-gap: 16px;
  }
  .observation-select {
    grid-column: 1;
    grid-row: 1;
  }
  .observation-bird-links {
    grid-column: 1;
    grid-row: 2;
  }
  #modal-content .observation-choice>img {
    grid-column: 3;
    grid-row: 1/3;
  }
  .observation-row-details {
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
    margin: 0;
    font-size: 11px;
  }
  .observation-row-details>input {
    margin-top: 4px;
  }
  .observation-choice .rare-notice {
    grid-column: 1/-1;
    grid-row: 3;
  }
}
/* Two visible lines within the existing 40px details control. */
.observation-row-details>textarea {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin-top: 6px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  resize: none;
  overflow: auto;
}
.observation-checkbox-spacer {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.observation-select:has(.observation-checkbox-spacer) {
  cursor: default;
}
/* Quiet row feedback: selection changes the fill; hovering does not animate or flash it. */
.observation-choice,.observation-choice:hover {
  transition: none;
  transform: none;
  background: #fff;
}
.observation-choice:has(input[name=bird]:checked),.observation-choice:has(input[name=bird]:checked):hover {
  background: #dcecf9;
  box-shadow: none;
}
@media (min-width:640px) {
  .observation-row-details>textarea {
    margin-top: 4px;
  }
}
@media (max-width:560px) {
  .observation-row-details>textarea {
    font-size: 16px;
  }
}
/* Expanding a selected row must not nudge the scroll position. */
#observation-results {
  overflow-anchor: none;
  scroll-behavior: auto;
}
/* Avoid blurred-backdrop/composited text repainting in the observation dialog. */
#guide-modal.observation-modal::backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(3,20,38,.68);
}
#guide-modal.observation-modal .modal-header {
  position: static;
}
#guide-modal.observation-modal .observation-choice,
#guide-modal.observation-modal .observation-choice * {
  animation: none;
  transition: none;
  transform: none;
}
#guide-modal.observation-modal .button:hover {
  filter: none;
}
/* Brief, stationary confirmation of submitted sightings. */
#list-results tr.new-sighting-row,#list-results tr.new-sighting-row td {
  background: #fff1b9;
}
/* Keep all five Overview leader slots visible, even before observations arrive. */
.leaders-panel .rank-row {
  min-height: 50px;
}
/* My Birds uses a simple search/year toolbar and compact mobile table rows. */
.listing-layout.my-birds-layout .listing-filters {
  grid-template-columns: minmax(0,1fr) 120px;
}
.mobile-bird-date,.remove-sighting-icon {
  display: none;
}
@media (max-width:760px) {
  .listing-layout.my-birds-layout .listing-filters {
    grid-template-columns: minmax(0,1fr) 96px;
    gap: 12px;
  }
  .my-birds-layout .listing-search {
    grid-column: auto;
  }
  .my-birds-layout .data-wrap {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .my-birds-layout table.responsive {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .my-birds-layout table.responsive thead {
    display: table-header-group;
  }
  .my-birds-layout table.responsive tbody {
    display: table-row-group;
  }
  .my-birds-layout table.responsive tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: white;
  }
  .my-birds-layout table.responsive th {
    padding: 9px 8px;
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
  }
  .my-birds-layout table.responsive td {
    display: table-cell;
    padding: 10px 8px;
    font-size: 13px;
    border: 0;
    border-top: 1px solid var(--line);
    vertical-align: middle;
  }
  .my-birds-layout table.responsive td:before {
    display: none !important;
  }
  .my-birds-layout table.responsive th:nth-child(2),.my-birds-layout table.responsive td:nth-child(2) {
    display: none;
  }
  .my-birds-layout table.responsive th:nth-child(3),.my-birds-layout table.responsive td:nth-child(3) {
    width: 58px;
    text-align: center;
  }
  .my-birds-layout table.responsive th:nth-child(4),.my-birds-layout table.responsive td:nth-child(4) {
    width: 48px;
    text-align: center;
    padding-left: 2px;
    padding-right: 6px;
  }
  .my-birds-layout .species-name {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .my-birds-layout .species-name img {
    width: 42px;
    height: 34px;
    flex: 0 0 42px;
    object-fit: cover;
  }
  .my-birds-layout .mobile-bird-date {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--muted);
  }
  .my-birds-layout .remove-sighting-label {
    display: none;
  }
  .my-birds-layout .remove-sighting-icon {
    display: block;
    width: 18px;
    height: 18px;
  }
  .my-birds-layout .remove-sighting-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    width: 36px;
    padding: 7px;
  }
}
/* My Birds totals and mobile login card */
.my-birds-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  font-size: 14px;
}
.my-birds-summary .listing-export {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.csv-icon {
  width: 25px;
  height: 28px;
  flex: none;
}
@media (max-width:760px) {
  .public-content-grid>.login-panel {
    background: #fff;
    border-color: var(--line);
    box-shadow: none;
  }
}
/* Mobile uses the browser's document scroller, including native pull-to-refresh. */
@media (max-width:760px) {
  html {
    overscroll-behavior-y: auto;
  }
  body.explorer {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    overscroll-behavior-y: auto;
  }
  .explorer #app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    grid-template-rows: auto auto 1fr;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }
  .explorer .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .explorer .workspace-header {
    position: sticky;
    top: 70px;
    z-index: 25;
  }
  .workspace-content {
    overflow: visible;
    overscroll-behavior-y: auto;
    scrollbar-gutter: auto;
  }
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
/* A distinct summary bar above the My Birds filters. */
.my-birds-summary {
  padding: 13px 16px;
  margin-bottom: 20px;
  background: #fff7df;
  border: 1px solid #e5cf8a;
  border-radius: 8px;
  color: #153452;
}
.my-birds-summary>strong {
  font-size: 15px;
  line-height: 1.4;
}
@media (max-width:760px) {
  .my-birds-summary {
    padding: 11px 12px;
    gap: 10px;
    margin-bottom: 16px;
  }
  .my-birds-summary>strong {
    font-size: 13px;
  }
}
.leader-membership-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 18px;
}
.leader-membership-actions .button {
  background: #fff7df;
  border-color: #e5cf8a;
}
#guide-modal.leader-membership-modal {
  width: min(620px,95vw);
  height: fit-content;
  min-height: 0;
}
#guide-modal.leader-membership-modal #modal-content {
  flex: 0 1 auto;
}
/* Keep both listing summaries equal in height, including the CSV action. */
.my-birds-summary {
  height: 54px;
  min-height: 54px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.my-birds-summary .listing-export {
  padding-top: 0;
  padding-bottom: 0;
}
/* Align the listing summary bars with Leaderbird's Membership action. */
.my-birds-summary {
  height: 42px;
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 18px;
}
.leader-membership-actions {
  min-height: 42px;
  margin-bottom: 18px;
}
.leader-membership-actions .button {
  height: 42px;
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Make the membership action distinct without changing its dimensions. */
.leader-membership-actions .button {
  background: #f7d66a;
  border-color: #c79a22;
  color: #153452;
  box-shadow: 0 2px 4px #624d1626,inset 0 1px 0 #fff4c6;
}
.leader-membership-actions .button:hover {
  background: #f2c94c;
  border-color: #ad8012;
  filter: none;
  box-shadow: 0 2px 5px #624d1638;
  transform: none;
}
.leader-membership-actions .button:active {
  background: #eac03f;
  box-shadow: inset 0 1px 3px #624d1633;
  transform: none;
}
.leaders-panel .leaders-awaiting {
  margin: -3px 0 12px;
  color: #657c90;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
/* Compact mobile standings before the continuously loading sightings feed. */
@media (max-width:760px) {
  .overview-page .leaders-panel {
    display: block;
    order: -1;
  }
  .leaders-panel [data-live-standings] {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 14px;
    padding-top: 12px;
  }
  .leaders-panel .leader-age-group {
    min-width: 0;
  }
  .leaders-panel .leader-age-group+ .leader-age-group {
    border-left: 1px solid var(--line);
    padding-left: 14px;
  }
  .leaders-panel .leader-age-group h3 {
    font-size: 13px;
    margin: 0 0 8px;
  }
  .leaders-panel .sightings-heading {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }
  .leaders-panel .sightings-heading h2 {
    font-size: 15px;
  }
  .leaders-panel .rank-row {
    min-height: 30px;
    padding: 5px 0;
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
    align-items: center;
  }
  .leaders-panel .rank-number {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 10px;
  }
  .leaders-panel .rank-row>strong:nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .leaders-panel .rank-row>strong:last-child {
    flex-shrink: 0;
  }
  .leaders-panel .leaders-awaiting {
    font-size: 11px;
    margin: 0 0 8px;
  }
}
.leaders-panel .rank-row .leaders-awaiting {
  margin: 0;
  font-weight: 400;
  font-style: italic;
  min-width: 0;
}
/* Center the initial observation instructions in the available results space. */
#observation-results:has(>.observation-help) {
  display: flex;
  flex-direction: column;
  padding: 0;
}
#modal-content #observation-results>.observation-help {
  flex: 0 0 auto;
  width: 100%;
  max-width: 680px;
  margin: auto;
  padding: 28px 30px;
  font-size: 13px;
  line-height: 1.8;
}
#modal-content .observation-help ul {
  padding-left: 22px;
  margin-bottom: 0;
}
@media (max-width:760px) {
  #modal-content #observation-results>.observation-help {
    padding: 22px 14px;
  }
}
#modal-content #observation-results>.observation-help {
  position: relative;
  top: -15px;
}
.ebird-layout {
  max-width: 980px;
  margin: 0 auto;
}
.ebird-heading h2 {
  margin-bottom: 6px;
}
.ebird-heading p,.ebird-attribution {
  color: var(--muted);
  font-size: 13px;
}
.ebird-filters {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto auto;
  align-items: end;
  gap: 12px;
  margin: 20px 0;
}
.ebird-filters label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}
.ebird-filters select {
  width: 100%;
  min-width: 0;
  height: 44px;
}
.ebird-filters .button {
  height: 44px;
  white-space: nowrap;
}
.ebird-location-status {
  font-size: 13px;
  color: var(--muted);
}
.ebird-location-status:empty {
  display: none;
}
.ebird-checklists {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.ebird-checklist+.ebird-checklist {
  border-top: 1px solid var(--line);
}
.ebird-checklist-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.ebird-checklist-title h3 {
  margin: 0;
  font-size: 15px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ebird-checklist-title h3 a {
  color: #075b9e;
}
.ebird-observer {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  overflow-wrap: anywhere;
}
.ebird-checklist-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.ebird-species {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff7df;
  color: #153452;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}
.ebird-species .nav-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
.ebird-checklist-link {
  margin-left: auto;
  color: #075b9e;
  font-weight: 600;
  white-space: nowrap;
}
.ebird-attribution {
  margin: 14px 0 0;
}
.ebird-empty {
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}
@media (max-width:760px) {
  .ebird-heading h2 {
    font-size: 19px;
  }
  .ebird-filters {
    gap: 10px;
  }
  .ebird-filters .button {
    font-size: 13px;
    padding: 8px;
  }
  .ebird-checklist {
    padding: 12px;
  }
  .ebird-checklist-title {
    display: block;
  }
  .ebird-checklist-title h3 {
    font-size: 14px;
  }
  .ebird-observer {
    display: block;
    text-align: left;
    margin-top: 4px;
  }
  .ebird-checklist-meta {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
  }
  .ebird-species {
    padding: 3px 6px;
  }
}
/* Stable GPS action: loading does not change the filter widths or add a summary. */
.ebird-filters {
  position: relative;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px 96px;
}
.ebird-filters #ebird-locate {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 10px;
}
#ebird-locate svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}
#ebird-locate[aria-busy=true] svg {
  animation: ebird-location-pulse 1s ease-in-out infinite;
}
@keyframes ebird-location-pulse {
  50% {
    opacity: .35;
  }
}
.ebird-location-status {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 12px 14px;
  background: #fff7e7;
  border: 1px solid #e5cf8a;
  border-radius: 6px;
  box-shadow: 0 3px 10px #15345220;
  color: #153452;
}
@media (max-width:760px) {
  .ebird-filters {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
}
@media (prefers-reduced-motion:reduce) {
  #ebird-locate[aria-busy=true] svg {
    animation: none;
  }
}
/* Match the cream-and-gold listing headers. */
.ebird-heading {
  padding: 14px 16px;
  background: #fff7df;
  border: 1px solid #e5cf8a;
  border-radius: 8px;
}
.ebird-heading h2 {
  font-size: 18px;
  margin: 0 0 4px;
  color: #153452;
}
.ebird-heading p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width:760px) {
  .ebird-heading {
    padding: 12px;
  }
  .ebird-heading h2 {
    font-size: 17px;
  }
  .ebird-heading p {
    font-size: 12px;
  }
}
.ebird-loading-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(330px,calc(100vw - 40px));
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - 40px);
  padding: 28px 24px;
  margin: auto;
  text-align: center;
}
.ebird-loading-modal h2 {
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
}
.ebird-loading-spinner {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 3px solid #dce8f2;
  border-top-color: #076bb8;
  border-radius: 50%;
  animation: ebird-loading-spin .8s linear infinite;
}
@keyframes ebird-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion:reduce) {
  .ebird-loading-spinner {
    animation: none;
  }
}
/* The non-interactive loading dialog keeps one border when initially focused. */
.ebird-loading-modal:focus {
  outline: none;
}
/* Checklist rows: location and observer together, clear action at the right. */
.ebird-checklist {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: 20px;
  row-gap: 8px;
  padding: 16px 20px;
}
.ebird-checklist:hover {
  background: #faf8f1;
}
.ebird-checklist-title {
  display: block;
  grid-column: 1;
  min-width: 0;
}
.ebird-checklist-title h3 {
  line-height: 1.45;
}
.ebird-checklist-title h3 a {
  color: #153452;
  text-decoration: none;
}
.ebird-checklist-title h3 a:hover {
  text-decoration: underline;
  color: #075b9e;
}
.ebird-checklist-title .ebird-observer {
  display: block;
  text-align: left;
  margin-top: 3px;
  font-size: 12px;
}
.ebird-checklist-meta {
  grid-column: 1;
  margin: 0;
  gap: 14px;
  flex-wrap: wrap;
}
.ebird-checklist>.ebird-checklist-link {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #aac6da;
  border-radius: 6px;
  background: white;
  text-decoration: none;
  margin: 0;
  font-size: 12px;
}
.ebird-checklist>.ebird-checklist-link:hover {
  background: #edf5fc;
  border-color: #528eb7;
}
@media (max-width:540px) {
  .ebird-checklist {
    padding: 13px 12px;
    column-gap: 10px;
  }
  .ebird-checklist-title {
    grid-column: 1/-1;
  }
  .ebird-checklist-meta {
    gap: 6px 10px;
  }
  .ebird-checklist>.ebird-checklist-link {
    grid-row: 2;
    padding: 7px 10px;
  }
}
.ebird-checklist-title h3 .ebird-directions {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  max-width: 100%;
}
.ebird-directions svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  align-self: flex-start;
  margin-top: 2px;
  color: #076bb8;
}
.ebird-directions span {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width:760px) {
  .sighting .sighting-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}
.ebird-species {
  background: #e5f0e8;
  color: #28583c;
}
/* Animate the raster logo's bird emblem independently of its lettering. */
.brand-art {
  display: block;
  position: relative;
  width: 100%;
  line-height: 0;
}
.brand-art.is-animating>.brand-logo-still {
  clip-path: inset(0 0 0 31%);
}
.brand .brand-art>.brand-bird-mark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(0 69% 0 0);
  transform-origin: 18% 58%;
  pointer-events: none;
}
.brand-art.is-animating>.brand-bird-mark {
  animation: brand-bird-hello 1.5s ease-in-out both;
}
@keyframes brand-bird-hello {
  0%,100% {
    transform: translateY(0) rotate(0);
  }
  18% {
    transform: translateY(1%) rotate(-2deg);
  }
  38% {
    transform: translateY(-6%) rotate(3deg);
  }
  50% {
    transform: translateY(-5%) rotate(-3deg);
  }
  62% {
    transform: translateY(-3%) rotate(2deg);
  }
  78% {
    transform: translateY(0) rotate(-1deg);
  }
}
@media (prefers-reduced-motion:reduce) {
  .brand-art.is-animating>.brand-bird-mark {
    animation: none;
  }
  .brand-art.is-animating>.brand-logo-still {
    clip-path: none;
  }
  .brand-art>.brand-bird-mark {
    display: none !important;
  }
}
/* Compact mobile Leaderbird: one table row per participant. */
@media (max-width:760px) {
  .leaderbird-layout .leader-membership-actions {
    min-height: 36px;
    margin-bottom: 10px;
  }
  .leaderbird-layout .leader-membership-actions .button {
    height: 36px;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
  }
  .listing-layout.leaderbird-layout .listing-filters {
    grid-template-columns: minmax(0,1fr) 90px 80px;
    gap: 8px;
    margin-bottom: 14px;
  }
  .leaderbird-layout .listing-search {
    grid-column: auto;
    min-width: 0;
  }
  .leaderbird-layout .listing-label-row {
    margin-bottom: 4px;
  }
  .leaderbird-layout .listing-filters label {
    font-size: 12px;
    line-height: 20px;
    gap: 4px;
    min-width: 0;
  }
  .leaderbird-layout .listing-filters input,.leaderbird-layout .listing-filters select {
    height: 40px;
    padding: 7px 8px;
    font-size: 14px;
  }
  .leaderbird-layout table.responsive {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .leaderbird-layout table.responsive thead {
    display: table-header-group;
  }
  .leaderbird-layout table.responsive tbody {
    display: table-row-group;
  }
  .leaderbird-layout table.responsive tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: white;
  }
  .leaderbird-layout table.responsive th {
    padding: 8px 6px;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
  }
  .leaderbird-layout table.responsive td {
    display: table-cell;
    padding: 10px 6px;
    font-size: 13px;
    border: 0;
    border-top: 1px solid var(--line);
    vertical-align: middle;
    text-align: left;
  }
  .leaderbird-layout table.responsive td:before {
    display: none !important;
  }
  .leaderbird-layout table.responsive th:first-child,.leaderbird-layout table.responsive td:first-child {
    width: 40px;
    text-align: center;
  }
  .leaderbird-layout table.responsive th:nth-child(3),.leaderbird-layout table.responsive td:nth-child(3) {
    width: 62px;
    text-align: center;
  }
  .listing-layout.leaderbird-layout table.responsive th:last-child,.listing-layout.leaderbird-layout table.responsive td:last-child {
    width: 48px;
    text-align: right;
    padding-right: 12px;
  }
  .leaderbird-layout .rank-number {
    width: 24px;
    height: 24px;
    margin: auto;
    font-size: 12px;
  }
  .leaderbird-layout .participant-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .leaderbird-layout .staff-badge {
    font-size: 8px;
    padding: 1px 4px;
  }
}
/* Species Seen keeps compact mobile rows and filters. */
@media (max-width:760px) {
  .listing-layout.species-seen-layout .listing-filters {
    grid-template-columns: minmax(0,1fr) 96px 80px;
    gap: 8px;
    margin-bottom: 14px;
  }
  .species-seen-layout .listing-search {
    grid-column: auto;
    min-width: 0;
  }
  .species-seen-layout .listing-label-row {
    margin-bottom: 4px;
  }
  .species-seen-layout .listing-filters label {
    font-size: 12px;
    line-height: 20px;
    gap: 4px;
    min-width: 0;
  }
  .species-seen-layout .listing-filters input,.species-seen-layout .listing-filters select {
    height: 40px;
    padding: 7px 8px;
    font-size: 14px;
  }
  .species-seen-layout table.responsive {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .species-seen-layout table.responsive thead {
    display: table-header-group;
  }
  .species-seen-layout table.responsive tbody {
    display: table-row-group;
  }
  .species-seen-layout table.responsive tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: white;
  }
  .species-seen-layout table.responsive th {
    padding: 8px 5px;
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
  }
  .species-seen-layout table.responsive td {
    display: table-cell;
    padding: 9px 5px;
    font-size: 12px;
    border: 0;
    border-top: 1px solid var(--line);
    vertical-align: middle;
    text-align: left;
  }
  .species-seen-layout table.responsive td:before {
    display: none !important;
  }
  .species-seen-layout table.responsive th:nth-child(2),.species-seen-layout table.responsive td:nth-child(2) {
    width: 66px;
    text-align: center;
  }
  .species-seen-layout table.responsive th:nth-child(3),.species-seen-layout table.responsive td:nth-child(3) {
    width: 72px;
    font-size: 10px;
    text-align: center;
  }
  .species-seen-layout table.responsive th:last-child,.species-seen-layout table.responsive td:last-child {
    width: 52px;
    text-align: center;
  }
  .species-seen-layout .species-name {
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .species-seen-layout .species-name img {
    width: 32px;
    height: 28px;
    flex-shrink: 0;
    object-fit: cover;
  }
}
.mobile-species-date {
  display: none;
}
@media (max-width:760px) {
  .species-seen-layout table.responsive th:nth-child(3),.species-seen-layout table.responsive td:nth-child(3) {
    display: none;
  }
  .species-seen-layout .mobile-species-date {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
  }
}
.observations-heading-short {
  display: none;
  text-decoration: none;
}
@media (max-width:760px) {
  .species-seen-layout .observations-heading-full {
    display: none;
  }
  .species-seen-layout .observations-heading-short {
    display: inline;
  }
  .species-seen-layout table.responsive th:nth-child(2),.species-seen-layout table.responsive td:nth-child(2) {
    width: 44px;
  }
  .species-seen-layout .species-name {
    font-size: 13px;
    line-height: 1.35;
  }
  .species-seen-layout .species-name img {
    flex: 0 0 32px;
  }
}
.species-seen-check {
  display: inline-flex;
  vertical-align: middle;
  color: #28784a;
}
.species-seen-check svg {
  display: block;
}
/* Tighten mobile list filters without shrinking their input touch areas. */
@media (max-width:760px) {
  .listing-layout .listing-filters {
    margin-bottom: 8px;
    row-gap: 8px;
  }
  .listing-layout .listing-filters>label,.listing-layout .listing-search {
    grid-template-rows: 20px auto;
    gap: 2px;
  }
  .listing-layout .listing-label-row {
    margin-bottom: 0;
  }
  .listing-layout .listing-label-row label,.listing-layout .listing-filters>label {
    line-height: 20px;
  }
}
/* Shared mobile typography and control sizing for all three lists. */
@media (max-width:760px) {
  .listing-layout:is(.my-birds-layout,.leaderbird-layout,.species-seen-layout) .listing-filters {
    column-gap: 8px;
    margin-bottom: 8px;
  }
  .listing-layout .listing-filters label,.listing-layout .listing-label-row label {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
  }
  .listing-layout .listing-filters input,.listing-layout .listing-filters select {
    height: 40px;
    font-size: 14px;
    line-height: 24px;
    padding: 7px 8px;
  }
  .listing-layout.my-birds-layout .listing-filters {
    grid-template-columns: minmax(0,1fr) 80px;
  }
  .listing-layout.leaderbird-layout .listing-filters {
    grid-template-columns: minmax(0,1fr) 96px 80px;
  }
  .listing-layout:is(.my-birds-layout,.leaderbird-layout,.species-seen-layout) table.responsive th {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
  }
  .listing-layout:is(.my-birds-layout,.leaderbird-layout,.species-seen-layout) table.responsive td {
    font-size: 13px;
    line-height: 1.4;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .listing-layout .species-name,.listing-layout .participant-name {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
  }
  .listing-layout .species-name {
    gap: 6px;
  }
  .listing-layout .species-name img {
    width: 32px;
    height: 28px;
    flex: 0 0 32px;
  }
  .listing-layout .mobile-bird-date,.listing-layout .mobile-species-date {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 400;
    margin-top: 3px;
  }
}
@media (max-width:760px) {
  .listing-layout .my-birds-summary,.listing-layout .leader-membership-actions {
    margin-bottom: 10px;
  }
}
/* Match the mobile Membership button footprint to the yellow summaries. */
@media (max-width:760px) {
  .listing-layout .leader-membership-actions {
    height: 42px;
    min-height: 42px;
  }
  .listing-layout .leader-membership-actions .button {
    height: 42px;
    min-height: 42px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
/* One shared mobile table treatment; individual columns keep their widths. */
@media (max-width:760px) {
  .listing-layout:is(.my-birds-layout,.leaderbird-layout,.species-seen-layout) .data-wrap {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .listing-layout:is(.my-birds-layout,.leaderbird-layout,.species-seen-layout) table.responsive th {
    height: 44px;
    vertical-align: middle;
    background: var(--soft);
    color: var(--muted);
    padding: 8px 6px;
    overflow-wrap: normal;
  }
  .listing-layout:is(.my-birds-layout,.leaderbird-layout,.species-seen-layout) table.responsive tbody tr {
    height: 58px;
    background: white;
  }
  .listing-layout:is(.my-birds-layout,.leaderbird-layout,.species-seen-layout) table.responsive td {
    padding: 9px 6px;
    vertical-align: middle;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-weight: 400;
  }
  .listing-layout .species-name>span {
    min-width: 0;
  }
  .listing-layout .species-name img {
    border-radius: 4px;
  }
}
/* eBird follows the shared compact mobile list styles. */
@media (max-width:760px) {
  .ebird-layout .ebird-heading {
    padding: 10px 12px;
    border-radius: 8px;
  }
  .ebird-layout .ebird-heading h2 {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 3px;
  }
  .ebird-layout .ebird-heading p {
    font-size: 11px;
    line-height: 1.4;
  }
  .ebird-layout .ebird-filters {
    margin: 10px 0 8px;
    gap: 8px;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
  .ebird-layout .ebird-filters label {
    min-width: 0;
    grid-template-rows: 20px 40px;
    gap: 2px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
  }
  .ebird-layout .ebird-filters select {
    height: 40px;
    font-size: 14px;
    line-height: 24px;
    padding: 7px 8px;
  }
  .ebird-layout .ebird-filters .button {
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    padding: 7px 12px;
  }
  .ebird-layout .ebird-filters #ebird-locate {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 8px;
  }
  .ebird-layout .ebird-checklists {
    border-radius: 8px;
  }
  .ebird-layout .ebird-checklist {
    padding: 9px 6px;
    column-gap: 8px;
    row-gap: 6px;
  }
  .ebird-layout .ebird-checklist-title h3 {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
  }
  .ebird-layout .ebird-checklist-title .ebird-observer {
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px;
  }
  .ebird-layout .ebird-checklist-meta {
    font-size: 10px;
    line-height: 1.4;
    gap: 6px 8px;
  }
  .ebird-layout .ebird-species {
    padding: 3px 6px;
  }
  .ebird-layout .ebird-checklist>.ebird-checklist-link {
    font-size: 12px;
    min-height: 38px;
    padding: 7px 8px;
  }
  .ebird-layout .ebird-attribution {
    font-size: 10px;
    line-height: 1.4;
    margin-top: 10px;
  }
}
/* Add Observation shares the compact mobile list typography and spacing. */
@media (max-width:760px) {
  #guide-modal.observation-modal #observation-search>label {
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 2px;
  }
  #guide-modal.observation-modal .observation-search-row {
    gap: 8px;
  }
  #guide-modal.observation-modal #bird-search {
    height: 40px;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
    line-height: 24px;
  }
  #guide-modal.observation-modal .observation-search-row>.button {
    height: 40px;
    min-height: 40px;
    padding: 7px 12px;
    font-size: 13px;
  }
  #guide-modal.observation-modal #observation-search .rare-toggle {
    min-height: 40px;
    font-size: 12px;
    line-height: 20px;
  }
  #guide-modal.observation-modal .observation-count {
    font-size: 12px;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 8px;
  }
  #guide-modal.observation-modal .observation-choice {
    grid-template-columns: minmax(0,1fr) 64px;
    gap: 2px 8px;
    padding: 9px 6px;
    min-height: 58px;
  }
  #guide-modal.observation-modal .observation-select {
    grid-column: 1;
    grid-row: 1;
    gap: 8px;
    font-size: 13px;
    line-height: 1.35;
  }
  #guide-modal.observation-modal .observation-select small {
    font-size: 10px;
    line-height: 1.4;
  }
  #guide-modal.observation-modal .observation-choice>img {
    grid-column: 2;
    grid-row: 1/3;
    width: 64px;
    height: 48px;
    max-width: 64px;
    border-radius: 4px;
  }
  #guide-modal.observation-modal .observation-bird-links {
    grid-column: 1;
    grid-row: 2;
    padding-left: 32px;
    gap: 10px;
    font-size: 10px;
    line-height: 1.4;
  }
  #guide-modal.observation-modal .observation-row-details {
    grid-column: 1/-1;
    grid-row: 3;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 20px;
  }
  #guide-modal.observation-modal .observation-row-details>input {
    height: 40px;
    min-height: 40px;
    margin-top: 2px;
    padding: 7px 8px;
    font-size: 14px;
    line-height: 24px;
  }
  #guide-modal.observation-modal .observation-choice .rare-notice {
    grid-column: 1/-1;
    grid-row: 4;
    font-size: 12px;
  }
  #guide-modal.observation-modal>.observation-submit-bar {
    padding: 10px 16px;
    font-size: 12px;
  }
  #guide-modal.observation-modal>.observation-submit-bar .button {
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    padding: 7px 12px;
  }
}
/* Leave room for the initially focused bird search outline. */
@media (max-width:760px) {
  #guide-modal.observation-modal #observation-search>label {
    margin-bottom: 7px;
  }
}
@media (max-width:760px) {
  #guide-modal.observation-modal .observation-search-row {
    grid-template-columns: minmax(0,1fr) auto;
  }
  #guide-modal.observation-modal .observation-search-row>.bird-search-field {
    grid-column: 1/-1;
    grid-row: 1;
  }
  #guide-modal.observation-modal .observation-search-row>.rare-toggle {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  #guide-modal.observation-modal .observation-search-row>.button {
    grid-column: 2;
    grid-row: 2;
  }
}
/* Suggestions clear the 8px row gap and 40px mobile search actions. */
@media (max-width:760px) {
  #guide-modal.observation-modal .bird-search-field .bird-suggestions {
    top: calc(100% + 56px);
  }
}
/* Shared mobile account form sizing, scoped away from avatar controls. */
@media (max-width:760px) {
  #guide-modal.profile-modal #modal-content,#guide-modal.registration-modal #modal-content,.password-modal .password-content {
    padding: 16px 18px 20px;
    font-size: 13px;
    line-height: 1.5;
  }
  #guide-modal.profile-modal .profile-edit-form,.password-modal .profile-edit-form {
    gap: 10px;
  }
  #guide-modal.profile-modal .profile-field-row {
    gap: 10px;
  }
  #guide-modal.profile-modal .profile-edit-form label:has(input:not([type=file])),.password-modal .profile-edit-form label,#registration-form label:not(.registration-check) {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    gap: 2px;
    margin: 0;
  }
  #guide-modal.profile-modal .profile-edit-form input:not([type=file]),.password-modal .profile-edit-form input,#registration-details input:not([type=checkbox]),#registration-details select {
    height: 40px;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
  }
  #registration-details .registration-fields {
    gap: 10px;
    margin-bottom: 10px;
  }
  #registration-form legend {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  #registration-form .registration-check {
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0;
    gap: 8px;
  }
  #registration-form .registration-check input {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    margin-top: 0;
  }
  #registration-form .registration-terms {
    margin: 10px 0;
  }
  #registration-form .registration-terms summary {
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
  }
  #registration-form .registration-terms>div {
    font-size: 12px;
    line-height: 1.5;
    padding: 0 12px 12px;
  }
  #guide-modal.profile-modal .field-help,#registration-details .registration-privacy,#registration-details .registration-parent-note {
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
  }
  #guide-modal.profile-modal .actions,#registration-form .actions,.password-modal .actions {
    gap: 8px;
    margin: 10px 0 0;
    min-height: 40px;
  }
  #guide-modal.profile-modal .actions button,#guide-modal.profile-modal #change-password,#guide-modal.profile-modal #request-profile-name,#registration-form button,.password-modal .actions button {
    min-height: 40px;
    font-size: 13px;
    line-height: 20px;
    padding: 9px 12px;
  }
}
/* Compact mobile Profile: paired fields and a single action row. */
@media (max-width:760px) {
  #guide-modal.profile-modal {
    height: fit-content;
    max-height: calc(100dvh - 24px);
  }
  #guide-modal.profile-modal #modal-content {
    flex: 0 1 auto;
    padding: 12px 16px 16px;
  }
  #guide-modal.profile-modal .profile-edit-form {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 8px;
  }
  #guide-modal.profile-modal .profile-edit-form>div,#guide-modal.profile-modal #profile-save-message {
    grid-column: 1/-1;
  }
  #guide-modal.profile-modal .profile-field-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  #guide-modal.profile-modal .profile-names>label:last-child {
    grid-column: 1/-1;
  }
  #guide-modal.profile-modal .profile-avatar {
    width: 64px;
    height: 64px;
  }
  #guide-modal.profile-modal .profile-approval-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }
  #guide-modal.profile-modal .profile-approval-row .field-help {
    font-size: 10px;
    line-height: 1.4;
  }
  #guide-modal.profile-modal #request-profile-name {
    font-size: 11px;
    padding: 6px 8px;
    min-height: 36px;
  }
  #guide-modal.profile-modal #change-password {
    grid-column: 1;
    grid-row: 5;
    width: 100%;
    margin: 0;
  }
  #guide-modal.profile-modal .profile-edit-form>.actions {
    grid-column: 2;
    grid-row: 5;
    margin: 0;
  }
  #guide-modal.profile-modal .actions>button {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
  }
  #guide-modal.profile-modal #profile-edit-cancel {
    display: none;
  }
  #guide-modal.profile-modal #profile-save-message {
    grid-row: 6;
    margin: 0;
    font-size: 12px;
  }
  #guide-modal.profile-modal #profile-save-message:empty {
    display: none;
  }
}
@media (max-width:760px) {
  #guide-modal.profile-modal .profile-field-row:not(.profile-names) {
    grid-template-columns: minmax(0,1fr);
  }
}
/* Shared desktop list headers and rows. */
@media (min-width:761px) {
  .listing-layout .data-wrap {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: auto;
  }
  .listing-layout table.responsive {
    width: 100%;
    border-collapse: collapse;
  }
  .listing-layout table.responsive th {
    height: 46px;
    padding: 10px 16px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .listing-layout table.responsive tbody tr {
    height: 60px;
    background: white;
  }
  .listing-layout table.responsive td {
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    vertical-align: middle;
  }
  .listing-layout .species-name,.listing-layout .participant-name {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
  }
  .listing-layout .species-name {
    gap: 10px;
  }
  .listing-layout .species-name img {
    width: 44px;
    height: 34px;
    flex: 0 0 44px;
    border-radius: 4px;
  }
  .listing-layout .rank-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin: auto;
  }
  .my-birds-layout table.responsive :is(th,td):nth-child(n/**/+3),.species-seen-layout table.responsive :is(th,td):nth-child(2),.species-seen-layout table.responsive :is(th,td):last-child,.leaderbird-layout table.responsive :is(th,td):first-child,.leaderbird-layout table.responsive :is(th,td):nth-child(n/**/+3) {
    text-align: center;
  }
}
/* Navigation focuses the heading for screen readers, not as an interactive control. */
.workspace-header h1[tabindex="-1"]:focus {
  outline: none;
}
@media (min-width:761px) {
  .leaderbird-layout table.responsive th:first-child,.leaderbird-layout table.responsive td:first-child {
    width: 64px;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width:760px) {
  .big-year-countdown .countdown-date {
    display: none;
  }
}
.admin-mobile-users {
  display: none;
}
@media (max-width:760px) {
  .admin-users-section .admin-filters {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) auto;
    gap: 8px;
    margin-bottom: 10px;
  }
  .admin-users-section .admin-filters label:first-child {
    grid-column: 1/-1;
    min-width: 0;
  }
  .admin-users-section .admin-filters label {
    min-width: 0;
    font-size: 12px;
    line-height: 20px;
    gap: 2px;
  }
  .admin-users-section .admin-filters input,.admin-users-section .admin-filters select {
    height: 40px;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
    width: 100%;
    font-weight: 400;
  }
  .admin-users-section .admin-filters>.button {
    height: 40px;
    min-height: 40px;
    padding: 7px 10px;
    font-size: 13px;
  }
  #admin-totals {
    padding: 10px 12px;
    margin: 0 0 10px;
    background: #fff7df;
    border: 1px solid #e5cf8a;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
  }
  .admin-users-section .admin-desktop-users {
    display: none;
  }
  .admin-mobile-users {
    display: block;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .admin-user-card {
    padding: 10px 12px;
  }
  .admin-user-card+.admin-user-card {
    border-top: 1px solid var(--line);
  }
  .admin-user-heading {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .admin-user-heading .admin-name {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .admin-user-heading .admin-badge {
    font-size: 9px;
  }
  .admin-user-email {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 3px;
    overflow-wrap: anywhere;
  }
  .admin-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 10px;
    color: var(--muted);
    margin-top: 5px;
  }
  .admin-user-details {
    margin-top: 6px;
    font-size: 11px;
  }
  .admin-user-details summary {
    cursor: pointer;
    color: var(--primary);
    padding: 4px 0;
  }
  .admin-user-details dl {
    margin: 6px 0 10px;
  }
  .admin-user-details dl>div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
  }
  .admin-user-details dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .admin-user-details .admin-row-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-user-details .admin-row-actions button {
    min-height: 38px;
    font-size: 12px;
    padding: 6px 10px;
  }
  .admin-users-section .admin-pagination {
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 11px;
  }
  .admin-users-section .admin-pagination button {
    min-height: 40px;
    font-size: 12px;
  }
}
.admin-user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.admin-user-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid #d5dce5;
  border-radius: 999px;
  background: #f0f2f6;
  color: #45566c;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 500;
}
.admin-user-pill.is-member {
  background: #fff7df;
  border-color: #e5cf8a;
  color: #72551b;
}
.admin-user-pill.is-active {
  background: #e5f0e8;
  border-color: #bad7c3;
  color: #28583c;
}
.admin-user-pill.is-inactive {
  background: #fbecef;
  border-color: #e5b9c2;
  color: #96394d;
}
.admin-user-detail-view h3 {
  margin: 0 0 4px;
}
#modal-content .admin-user-detail-view .admin-user-email {
  margin: 0 0 8px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.admin-user-detail-view dl {
  margin: 16px 0;
  font-size: 13px;
}
.admin-user-detail-view dl>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}
.admin-user-detail-view dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.admin-user-detail-view .admin-row-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.admin-user-detail-view .admin-row-actions button {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
}
@media (max-width:760px) {
  .admin-mobile-users>.admin-user-card {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: white;
    text-align: left;
    padding: 10px 12px;
    color: var(--ink);
  }
  .admin-mobile-users>.admin-user-card+.admin-user-card {
    border-top: 1px solid var(--line);
  }
  .admin-mobile-users>.admin-user-card:hover {
    background: #f7f9fc;
  }
  .admin-mobile-users>.admin-user-card:focus-visible {
    outline-offset: -3px;
  }
  .admin-user-card .admin-user-email {
    display: block;
  }
  .admin-user-card .admin-user-meta {
    gap: 5px;
  }
}
@media (max-width:760px) {
  .admin-mobile-users>.admin-user-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    column-gap: 10px;
  }
  .admin-user-card>.admin-user-heading,.admin-user-card>.admin-user-email,.admin-user-card>.admin-user-meta {
    grid-column: 1;
  }
  .admin-user-card>.admin-user-open {
    grid-column: 2;
    grid-row: 1/4;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    min-height: 36px;
    border: 1px solid #aac6da;
    border-radius: 6px;
    background: #f5f9fd;
    color: #075b9e;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  .admin-user-open>span {
    font-size: 18px;
    line-height: 1;
  }
}
.admin-user-pill.is-nonmember {
  background: #f2eafa;
  border-color: #d8c4e8;
  color: #70478e;
}
@media (max-width:760px) {
  .admin-users-section .admin-filters {
    grid-template-columns: minmax(0,1fr) auto;
  }
}
.admin-tab-short {
  display: none;
}
@media (max-width:760px) {
  .admin-layout .admin-tabs {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    margin-bottom: 14px;
  }
  .admin-layout .admin-tabs button {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    justify-content: center;
    gap: 5px;
    padding: 8px 4px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    grid-column: auto;
  }
  .admin-layout .admin-tabs .nav-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }
  .admin-layout .admin-tabs .admin-tab-full {
    display: none;
  }
  .admin-layout .admin-tabs .admin-tab-short {
    display: inline;
  }
  .admin-user-card>.admin-user-open {
    width: 36px;
    height: 36px;
    padding: 7px;
    justify-content: center;
  }
  .admin-user-open svg {
    display: block;
    flex: none;
  }
}
/* Admin totals share the listing summary treatment on desktop and mobile. */
.admin-users-section #admin-totals {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: #fff7df;
  border: 1px solid #e5cf8a;
  border-radius: 8px;
  color: #153452;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
}
@media (min-width:761px) {
  .admin-users-section #admin-totals {
    font-size: 14px;
    padding: 10px 16px;
  }
  .admin-users-section .admin-filters {
    gap: 12px;
    margin-bottom: 10px;
  }
  .admin-users-section .admin-filters label {
    gap: 2px;
    line-height: 20px;
  }
  .admin-users-section .admin-filters input,.admin-users-section .admin-filters select,.admin-users-section .admin-filters>.button {
    height: 42px;
    min-height: 42px;
  }
}
.admin-user-detail-view dt {
  font-weight: 700;
}
.admin-user-pill.is-member {
  background: #e5f0e8;
  border-color: #bad7c3;
  color: #28583c;
}
.admin-user-pill.is-nonmember {
  background: #fbecef;
  border-color: #e5b9c2;
  color: #96394d;
}
.admin-user-pill.is-age {
  width: 52px;
  justify-content: center;
}
.admin-user-pill.is-adult {
  background: #edf0f5;
  border-color: #d2dae5;
  color: #4d6079;
}
.admin-user-pill.is-youth {
  background: #f1ecf7;
  border-color: #dbd0e7;
  color: #6b557e;
}
.admin-rarity-total {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  margin: 0 0 10px;
  background: #fff7df;
  border: 1px solid #e5cf8a;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.admin-rarities-section #admin-rarity-status {
  min-height: 20px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 20px;
  color: #72551b;
}
.admin-rarities-section .admin-filters {
  margin-bottom: 8px;
}
@media (max-width:760px) {
  .admin-rarity-total {
    padding: 10px 12px;
    font-size: 12px;
  }
  .admin-rarities-section .admin-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-rarities-section .admin-filters label {
    grid-column: 1/-1;
    min-width: 0;
    font-size: 12px;
    line-height: 20px;
    gap: 2px;
  }
  .admin-rarities-section .admin-filters input {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 7px 8px;
    font-size: 14px;
    font-weight: 400;
  }
  .admin-rarities-section .admin-filters>button {
    min-height: 40px;
    height: 40px;
    font-size: 13px;
    padding: 7px 8px;
  }
  .admin-rarities-section .data-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    overflow: hidden;
  }
  .admin-rarities-section .admin-rarities {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .admin-rarities-section .admin-rarities thead {
    display: none;
  }
  .admin-rarities-section .admin-rarities tbody {
    display: block;
  }
  .admin-rarities-section .admin-rarities tr {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px 10px;
    padding: 10px 12px;
    border: 0;
    background: white;
  }
  .admin-rarities-section .admin-rarities tr+tr {
    border-top: 1px solid var(--line);
  }
  .admin-rarities-section .admin-rarities tr.rarity-changed {
    background: #fff9df;
  }
  .admin-rarities-section .admin-rarities td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    font-size: 13px;
  }
  .admin-rarities-section .admin-rarities td:first-child {
    grid-column: 1/-1;
  }
  .admin-rarities-section .admin-rarities td strong {
    font-weight: 600;
    line-height: 1.4;
  }
  .admin-rarities-section .admin-rarities td small {
    font-size: 10px;
    line-height: 1.4;
    margin-top: 2px;
  }
  .admin-rarities-section .admin-rarities td[data-season-label]:before {
    content: attr(data-season-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 2px;
  }
  .admin-rarities-section .admin-rarities select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 7px 8px;
    font-size: 14px;
    font-weight: 400;
  }
  .admin-rarities-section .admin-more-birds {
    width: 100%;
    min-height: 40px;
    margin-top: 10px;
    font-size: 12px;
  }
}
.admin-rarities td small {
  color: #718295;
  font-weight: 400;
}
/* Rarity colors follow the selected value without changing control geometry. */
.admin-rarities select[data-rarity="0"] {
  background-color: #eaf3ed;
  border-color: #bad4c3;
  color: #28583c;
}
.admin-rarities select[data-rarity="2"] {
  background-color: #fff5dc;
  border-color: #e5ce8e;
  color: #75551b;
}
.admin-rarities select[data-rarity="1"] {
  background-color: #faedef;
  border-color: #e4c0c7;
  color: #8a3d4c;
}
.admin-rarities select option {
  background: white;
  color: var(--ink);
}
.admin-rarities select[hidden] {
  display: none !important;
}
.admin-rarities .rarity-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 100px;
  height: 40px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 24px;
  font-weight: 400;
  text-align: left;
}
.rarity-picker[data-rarity="0"] {
  background: #eaf3ed;
  border-color: #bad4c3;
  color: #28583c;
}
.rarity-picker[data-rarity="2"] {
  background: #fff5dc;
  border-color: #e5ce8e;
  color: #75551b;
}
.rarity-picker[data-rarity="1"] {
  background: #faedef;
  border-color: #e4c0c7;
  color: #8a3d4c;
}
.rarity-picker[aria-expanded="true"] {
  box-shadow: 0 0 0 2px #1687dd40;
}
.rarity-menu {
  position: fixed;
  z-index: 1000;
  padding: 5px;
  background: #fff;
  border: 2px solid #6b94b4;
  border-radius: 8px;
  box-shadow: 0 8px 24px #082c4a40,0 2px 6px #082c4a26;
  color: var(--ink);
  font-size: 13px;
}
.rarity-menu-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 20px;
}
.rarity-menu-option.is-highlighted {
  background: #e1effc;
}
.rarity-menu-option[aria-selected="true"] {
  font-weight: 600;
}
.rarity-option-check {
  margin-left: auto;
  width: 14px;
  color: #075b9e;
}
.rarity-option-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.rarity-option-dot[data-rarity="0"] {
  background: #659b78;
}
.rarity-option-dot[data-rarity="2"] {
  background: #c69b36;
}
.rarity-option-dot[data-rarity="1"] {
  background: #be7381;
}
@media (max-width:760px) {
  .admin-rarities .rarity-picker {
    min-width: 0;
    font-size: 14px;
    padding: 7px 8px;
  }
}
@media (max-width:760px) {
  .admin-rarities-section.rarities-awaiting-search #admin-results {
    display: none;
  }
}
/* Four compact season controls per bird on mobile. */
@media (max-width:760px) {
  .admin-rarities-section .admin-rarities tr {
    grid-template-columns: repeat(4,minmax(0,1fr));
    column-gap: 6px;
    padding: 10px 8px;
  }
  .admin-rarities-section .admin-rarities td[data-season-label]:before {
    font-size: 11px;
  }
  .admin-rarities-section .admin-rarities .rarity-picker {
    gap: 3px;
    padding: 7px 5px;
    font-size: 12px;
    height: 40px;
    line-height: 1.2;
  }
  .admin-rarities-section .rarity-picker svg {
    width: 11px;
    height: 11px;
    flex: none;
  }
  .admin-rarities-section .rarity-picker>span {
    min-width: 0;
  }
}
/* Weekly Tip shares the compact admin section treatment. */
.admin-tips-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: #fff7df;
  border: 1px solid #e5cf8a;
  border-radius: 8px;
}
.admin-tips-heading h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
.admin-tips-heading .button {
  display: inline-flex;
  gap: 5px;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.admin-tips-heading .nav-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.admin-tips-help {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 10px 0 12px;
}
.admin-tips-section #admin-tip-list:not(:empty) {
  margin-top: 16px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.admin-tips-section .admin-tip-card {
  padding: 14px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.admin-tips-section .admin-tip-card:last-child {
  border-bottom: 0;
}
.admin-tips-section .admin-tip-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.admin-tip-current {
  display: inline-flex;
  padding: 2px 7px;
  background: #e5f0e8;
  border: 1px solid #bad7c3;
  border-radius: 999px;
  color: #28583c;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
}
.admin-tips-section .admin-tip-card p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.admin-tips-section .admin-tip-card button {
  min-height: 38px;
  padding: 7px 10px;
  font-size: 12px;
  background: #f5f9fd;
  border-color: #aac6da;
  color: #075b9e;
}
@media (max-width:760px) {
  .admin-tips-heading {
    padding: 6px 10px;
  }
  .admin-tips-heading h2 {
    font-size: 13px;
  }
  .admin-tips-help {
    font-size: 11px;
    margin: 8px 0 10px;
  }
  .admin-tips-section .admin-tip-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .admin-tips-section .admin-tip-card h3 {
    font-size: 13px;
  }
  .admin-tips-section .admin-tip-card p {
    font-size: 12px;
    line-height: 1.45;
  }
  #admin-tip-form {
    gap: 10px;
    font-size: 13px;
  }
  #admin-tip-form .profile-field-row {
    gap: 10px;
  }
  #admin-tip-form label {
    font-size: 12px;
    line-height: 20px;
    gap: 2px;
  }
  #admin-tip-form input {
    height: 40px;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
  }
  #admin-tip-form textarea {
    min-height: 140px;
    padding: 8px;
    font-size: 14px;
    line-height: 1.5;
  }
  #admin-tip-form .actions {
    gap: 8px;
  }
  #admin-tip-form .actions button {
    min-height: 40px;
    font-size: 13px;
    padding: 8px 12px;
  }
}
.admin-tips-section .admin-tips-heading {
  height: 42px;
  min-height: 42px;
  padding: 3px 10px;
}
.admin-tips-section .admin-tips-heading .button {
  height: 34px;
  min-height: 34px;
  padding: 5px 10px;
}
@media (max-width:760px) {
  .admin-rarities-section.rarities-awaiting-search #admin-save-rarities,.admin-rarities-section.rarities-awaiting-search #admin-discard-rarities {
    display: none;
  }
}

/* eBird report switcher and notable-observation rows. */
.ebird-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ebird-tabs button { min-height: 40px; padding: 8px 14px; font-size: 13px; font-weight: 600; }
.ebird-tabs button[aria-pressed="true"] { background: #dceefa; border-color: #7daed2; color: #075b9e; }
.ebird-rarity-scientific { display: block; font-size: 11px; font-style: italic; color: var(--muted); margin-top: 2px; }
.ebird-rarity-location { font-size: 12px; line-height: 1.4; margin-top: 5px; overflow-wrap: anywhere; }
.ebird-rarity-location a { color: var(--primary); }
@media (max-width: 760px) {
  .ebird-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .ebird-tabs button { padding: 8px 6px; font-size: 12px; }
  .ebird-rarity-scientific { font-size: 10px; }
  .ebird-rarity-location { font-size: 11px; }
}

/* Gold identifies the active report; the description stays neutral. */
.ebird-tabs button[aria-pressed="true"] {
  background: #f7d66a;
  border-color: #c79a22;
  color: #153452;
}
.ebird-layout .ebird-heading {
  background: #e1effc;
  border-color: #b8d5ed;
}

/* Compact rarity results on both layouts. */
.ebird-layout .ebird-checklist.ebird-rarity {
  padding: 10px 14px;
  row-gap: 4px;
  column-gap: 12px;
}
.ebird-rarity .ebird-checklist-title h3 { line-height: 1.3; }
.ebird-rarity .ebird-rarity-scientific { margin-top: 0; line-height: 1.3; }
.ebird-rarity .ebird-rarity-location { margin-top: 2px; line-height: 1.3; }
.ebird-rarity .ebird-checklist-meta { gap: 8px; line-height: 1.3; }
.ebird-rarity .ebird-species { padding: 2px 6px; }
.ebird-layout .ebird-rarity > .ebird-checklist-link { min-height: 34px; padding: 5px 10px; }
@media (min-width: 761px) {
  .ebird-rarity .ebird-checklist-title h3 { display: inline; }
  .ebird-rarity .ebird-rarity-scientific { display: inline; margin-left: 8px; }
}
@media (max-width: 760px) {
  .ebird-layout .ebird-checklist.ebird-rarity { padding: 8px 10px; row-gap: 3px; column-gap: 8px; }
  .ebird-layout .ebird-rarity .ebird-checklist-meta { gap: 4px 8px; }
  .ebird-layout .ebird-rarity > .ebird-checklist-link { min-height: 34px; padding: 5px 8px; font-size: 11px; }
}

@media (min-width: 761px) {
  .ebird-layout .ebird-checklist.ebird-rarity { padding: 14px 18px; row-gap: 5px; }
}
@media (max-width: 760px) {
  .ebird-layout .ebird-rarity .ebird-checklist-title { grid-column: 1; }
  .ebird-layout .ebird-rarity > .ebird-checklist-link { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .ebird-layout .ebird-rarity .ebird-checklist-meta { grid-column: 1; }
}

.ebird-rarity .ebird-rarity-location { padding-bottom: 3px; }

/* Match the compact mobile rarity layout for recent checklists. */
@media (max-width: 760px) {
  .ebird-layout .ebird-checklist:not(.ebird-rarity) {
    padding: 8px 10px;
    row-gap: 3px;
    column-gap: 8px;
  }
  .ebird-layout .ebird-checklist:not(.ebird-rarity) .ebird-checklist-title {
    grid-column: 1;
    padding-bottom: 3px;
  }
  .ebird-layout .ebird-checklist:not(.ebird-rarity) .ebird-checklist-meta {
    grid-column: 1;
    gap: 4px 8px;
  }
  .ebird-layout .ebird-checklist:not(.ebird-rarity) > .ebird-checklist-link {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* Sortable Users headers retain the existing table geometry. */
.admin-table .admin-sort-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
}
.admin-sort-header > span { font-size: 10px; opacity: .65; }
.admin-table th[aria-sort="ascending"] .admin-sort-header,
.admin-table th[aria-sort="descending"] .admin-sort-header { color: #075b9e; }
.admin-table .admin-sort-header:hover { color: #075b9e; }

/* Monthly target birds: 2027 administration. */
.target-heading { display:flex; align-items:center; min-height:42px; padding:8px 14px; border:1px solid #efcd70; border-radius:8px; background:#fff7de; box-sizing:border-box; }
.target-heading h2 { margin:0; font-size:15px; }
.target-help { font-size:13px; line-height:1.6; margin:10px 0 16px; }
.target-month { display:block; max-width:200px; margin-bottom:14px; font-size:13px; font-weight:600; }
.target-month select { display:block; width:100%; margin-top:5px; }
.target-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.target-card { padding:14px; background:#fff; border:1px solid #c5dcf0; border-radius:8px; min-width:0; }
.target-card label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.target-card input { width:100%; min-width:0; }
.target-preview { height:100px; margin-top:12px; display:flex; align-items:center; justify-content:center; }
.target-preview img { object-fit:cover; border-radius:6px; }
.target-actions { display:flex; gap:10px; margin-top:16px; }
.public-targets[aria-busy=true] { min-height:260px; }
@media(max-width:760px) {
 .admin-layout .admin-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .admin-layout .admin-tabs button { font-size:11px; gap:3px; }
 .admin-layout .admin-tabs .nav-icon { display:none; }
 .target-fields { grid-template-columns:1fr; gap:8px; }
 .target-card { padding:10px; display:grid; grid-template-columns:minmax(0,1fr) 72px; column-gap:10px; }
 .target-card label,.target-card input { grid-column:1; }
 .target-card input { font-size:14px; }
 .target-preview { grid-column:2; grid-row:1 / 3; height:64px; margin:0; }
 .target-preview img { width:72px; height:58px; }
}

.target-heading { margin-bottom: 10px; }

/* Compact date/time pill in the Overview sightings feed. */
.sighting-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 162px;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border: 1px solid #d7e3ec;
  border-radius: 999px;
  background: #edf3f7;
  color: #315b78;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Daily Quiz entry point; quiz content and scoring are not yet implemented. */
.hero-visual .daily-quiz-trigger,.hero-tip .daily-quiz-trigger {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 88px;
  height: 88px;
  padding: 7px;
  border: 3px solid #fff6cf;
  border-radius: 50%;
  background: #ffdc62;
  color: #103e60;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 3px 12px #103e6040;
  animation: quiz-attention 2.8s ease-out 3;
  transform: none;
}
.hero-visual .daily-quiz-trigger:hover { background: #ffe589; transform: none; }
.hero-visual .daily-quiz-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.daily-quiz-bird { display: flex; align-items: center; justify-content: center; height: 20px; }
.daily-quiz-bird svg { width: 20px; height: 20px; }
@keyframes quiz-attention {
  0%,100% { box-shadow: 0 3px 12px #103e6040, 0 0 0 0 #ffdc6260; }
  65% { box-shadow: 0 3px 12px #103e6040, 0 0 0 10px #ffdc6200; }
}
@media (prefers-reduced-motion: reduce) { .hero-visual .daily-quiz-trigger { animation: none; } }

/* Daily Quiz prototype: real bird photos, explicitly sample questions/standings. */
#guide-modal.daily-quiz-modal { width: min(1040px,calc(100vw - 32px)); height: min(770px,calc(100dvh - 24px)); max-height: calc(100dvh - 24px); min-height: 0; }
#guide-modal.daily-quiz-modal #modal-content { padding: 16px 24px; background: #f7fafc; }
.quiz-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: start; }
.quiz-play { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 18px; min-width: 0; }
.quiz-round-heading { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; gap: 10px; }
.quiz-score-pill { padding: 2px 9px; border-radius: 999px; color: #fff; background: #244b6b; font-size: 12px; }
.quiz-progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; margin: 10px 0 12px; background: #d8e3ec; accent-color: #087da2; }
.quiz-progress::-webkit-progress-bar { background: #d8e3ec; }
.quiz-progress::-webkit-progress-value { background: #1675ac; border-radius: 999px; }
.quiz-progress::-moz-progress-bar { background: #1675ac; }
.quiz-play h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.4; }
.quiz-play h3:focus,.quiz-feedback:focus { outline: none; }
.quiz-photo { height: 300px; display: flex; align-items: center; justify-content: center; border-radius: 7px; overflow: hidden; background: #485e45; }
#guide-modal.daily-quiz-modal .quiz-photo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.quiz-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; grid-auto-rows: 60px; margin-top: 14px; }
.quiz-play .quiz-choice { display: flex; align-items: center; gap: 8px; padding: 9px 10px; min-height: 49px; min-width: 0; border: 1px solid #b9ccdc; border-radius: 6px; background: #edf2f7; color: #193c57; font-size: 12px; font-weight: 500; text-align: left; line-height: 1.35; transform: none; box-shadow: none; transition: background-color .15s,border-color .15s; }
.quiz-play .quiz-choice:hover:not(:disabled) { background: #dce9f4; border-color: #5687b0; transform: none; }
.quiz-choice-letter { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 23px; height: 23px; border-radius: 5px; background: #244b6b; color: #fff; font-size: 11px; font-weight: 600; }
.quiz-choice-mark { margin-left: auto; flex: 0 0 12px; font-weight: 700; }
.quiz-play .quiz-choice:disabled { opacity: 1; cursor: default; }
.quiz-play .quiz-choice.is-correct { border-color: #62a276; background: #dcefe2; color: #28623c; }
.quiz-play .quiz-choice.is-incorrect { border-color: #dba19b; background: #fff0ee; color: #98443b; }
#guide-modal.daily-quiz-modal .quiz-feedback { display: flex; align-items: center; justify-content: center; height: 64px; box-sizing: border-box; margin: 0; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--muted); }
#guide-modal.daily-quiz-modal .quiz-feedback.is-correct { color:#28623c;background:#f1f7f2;border-color:#96bf9f;border-radius:6px;box-shadow:none;gap:8px; }
#guide-modal.daily-quiz-modal .quiz-feedback.is-correct::before { content:"\2713";font-size:19px;font-weight:700; }
#guide-modal.daily-quiz-modal .quiz-feedback.is-incorrect { color: #893c32; background: #f9e7e2; border-color: #d8a59a; }
.quiz-next-row { display: grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:12px; margin-top:12px; }
.quiz-next-row>span { font-size: 11px; color: var(--muted); }
.quiz-next-row .button { display: inline-flex; align-items: center; gap: 6px; min-height: 64px; padding: 7px 14px; font-size: 13px; transform: none; }
.quiz-board { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.quiz-board header { display: flex; gap: 10px; align-items: center; padding: 16px; background: #216375; color: white; border-bottom: 1px solid #216375; }
.quiz-board header>.nav-icon { width: 22px; height: 22px; }
#guide-modal.daily-quiz-modal .quiz-board h3 { color: white; margin: 0; font-size: 16px; line-height: 1.4; }
.quiz-board-labels { display: flex; justify-content: space-between; padding: 12px 16px 6px 55px; color: #61788c; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.quiz-leaders { list-style: none; padding: 0 16px; margin: 0; }
#modal-content .quiz-leaders li { display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid #e0eaf2; margin: 0; font-size: 12px; }
#modal-content .quiz-leaders li:last-child { border: 0; }
.quiz-rank { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: #edf3f7; color: #315b78; font-weight: 600; }
.quiz-rank-1 { background: #ffe48c; color: #715600; }
.quiz-rank-2 { background: #e1e8ee; color: #435c71; }
.quiz-rank-3 { background: #efdbca; color: #815838; }
.quiz-your-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; margin: 10px 12px 12px; background: #f9de87; border: 1px solid #e7c45d; border-radius: 6px; font-size: 12px; }
.quiz-finish { min-height: 555px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.quiz-finish-icon { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: #fff2c2; color: #12668b; }
.quiz-finish-icon svg { width: 34px; height: 34px; }
.quiz-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 5px; }
.quiz-finish h3 { font-size: 24px; }
.quiz-finish>p:not(.quiz-kicker) { font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.quiz-final-score { display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0 24px;padding:18px 36px;min-width:250px;background:#f0f5f9;border:1px solid #d6e3ec;border-radius:12px; }
.quiz-final-score>strong { font-size:56px;line-height:1.1;color:#174b70; }
.quiz-final-score>span { font-size:14px;font-weight:500;color:#45667f; }
.quiz-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:760px) {
 #guide-modal.daily-quiz-modal { width: calc(100vw - 20px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
 #guide-modal.daily-quiz-modal #modal-content { padding: 12px; }
 .quiz-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
 .quiz-play { padding: 12px; }
 .quiz-photo { height: 230px; }
 .quiz-play h3 { font-size: 17px; }
 .quiz-play .quiz-choice { padding: 8px; font-size: 12px; min-height: 54px; gap: 6px; }
 .quiz-choice-letter { flex-basis: 20px; height: 20px; }
 .quiz-finish { min-height: 500px; }
 .quiz-next-row>span { font-size: 10px; }
}
@media(max-width:380px) { .quiz-choices { grid-template-columns: 1fr; } .quiz-photo { height: 200px; } }

.quiz-next-row .button:disabled { background: #acc3d2; border-color: #acc3d2; color: white; cursor: default; box-shadow: none; }

/* Owner-only shared image audit intentionally retains its desktop layout. */
.image-audit-scroll { overflow-x: auto; }
.image-audit { min-width: 940px; }
.image-audit .admin-tips-heading { display:flex;justify-content:space-between;align-items:center; }
.image-audit-filters { display:grid;grid-template-columns: 420px 240px;gap:18px;margin:18px 0; }
.image-audit-filters label,.image-editor-controls label { display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600; }
.image-audit-row { display:grid;grid-template-columns:630px minmax(270px,1fr);gap:22px;padding:16px;margin:14px 0;background:white;border:1px solid var(--line);border-radius:8px; }
.image-audit-row h3 { margin:0;font-size:18px; }
.image-audit-row p { margin:7px 0;font-size:13px; }
.image-audit-row .actions { display:flex;flex-wrap:wrap;gap:8px;margin:14px 0; }
.image-audit-row button { font-size:12px; }
.image-audit-row .image-audit-photo { display:flex;align-items:center;justify-content:center;width:630px;height:250px;padding:0;border:0;border-radius:6px;background:#485e45;color:white;overflow:hidden;transform:none; }
.image-audit-photo img { width:100%;height:100%;object-fit:contain; }
.image-audit-status { display:inline-block;border-radius:20px;padding:3px 10px;font-size:12px;background:#fff1c9;color:#705219; }
.image-audit-status.approved { background:#e1f0e5;color:#235735; }
#image-audit-pages { display:flex;align-items:center;gap:12px; }
#guide-modal.bird-image-editor-modal { width:min(1200px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:min(780px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);min-height:0; }
#guide-modal.bird-image-editor-modal #modal-content { flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable; }
.bird-image-editor { display:grid;grid-template-columns:600px minmax(480px,1fr);gap:24px;min-width:1104px;align-items:start; }
#bird-crop { display:block;width:600px;height:440px;touch-action:none;cursor:grab;border-radius:7px; }
#bird-crop:active { cursor:grabbing; }
.crop-zoom { display:flex;gap:14px;align-items:center;font-size:13px;margin:12px 0; }
.crop-zoom input { flex:1; }
#crop-dimensions { font-size:12px; }
.image-editor-controls { display:flex;flex-direction:column;gap:12px; }
.image-editor-controls input { width:100%;min-width:0; }
.crop-thumb { display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--muted); }
#crop-thumb { width:120px;height:88px; }
#crop-candidates:empty { visibility:hidden; }
#crop-candidates { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;height:270px;align-content:start;overflow:auto;scrollbar-gutter:stable;font-size:11px; }
#crop-candidates button { display:block;width:100%;height:82px;padding:0;overflow:hidden; }
#guide-modal #crop-candidates img { display:block;width:100%;height:82px;object-fit:cover; }

.bird-image-editor>div:first-child { justify-self:center;width:600px; }
#guide-modal.bird-image-editor-modal #crop-message { min-height:42px;margin:12px 0 0; }

/* Preserve the approved bird crop instead of cropping it again in list boxes. */
.listing-layout .species-name img,.sighting>img,.public-target-list img,.target-preview img,
#modal-content .bird-suggestions img,#guide-modal.observation-modal .observation-choice>img {
 object-fit:contain;
}
@media(min-width:761px) {
 .listing-layout .species-name img { width:46.4px;height:34px;flex:0 0 46.4px; }
 .sighting>img { width:90px;height:66px;flex:0 0 90px; }
 .public-target-list img { width:104px;height:76px;flex:0 0 104px; }
 #modal-content .bird-suggestions img { width:44px;height:32px;flex:0 0 44px; }
 #guide-modal.observation-modal .observation-choice>img { width:88px;height:64px;max-width:88px; }
 #guide-modal.observation-modal .observation-choice { grid-template-columns:minmax(0,1fr) minmax(190px,.9fr) 88px; }
 .target-preview img { width:120px;height:88px; }
}

img[data-bird-photo] { cursor:zoom-in; }
img[data-bird-photo]:focus-visible { outline:2px solid #0877bc;outline-offset:3px; }
dialog.bird-photo-modal { height:fit-content;min-height:0;width:min(650px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0; }
.bird-photo-content { position:relative;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0;overflow:auto; }
.bird-photo-content img { display:block;width:600px;max-width:100%;height:auto;aspect-ratio:15/11;max-height:calc(100dvh - 140px);object-fit:contain;border-radius:5px; }
.bird-photo-content img[hidden] { display:none; }
.bird-photo-status { position:absolute;left:16px;right:16px;text-align:center;font-size:14px; }

@media(min-width:761px) and (max-height:820px) {
 #guide-modal.daily-quiz-modal #modal-content { padding-top:16px;padding-bottom:16px; }
}

@media(max-width:760px) {
 .quiz-next-row { gap:8px; }
 #guide-modal.daily-quiz-modal .quiz-feedback { height:96px;font-size:13px;padding:6px 8px; }
 .quiz-next-row .button { padding:7px 10px;font-size:12px; }
}

.quiz-finish { padding:20px 10px; }
.quiz-finish .quiz-finish-invitation { max-width:290px;color:var(--muted); }

/* Database-backed Daily Quiz and review calendar. */
.quiz-loading,.quiz-unavailable { padding:40px 20px;text-align:center; }
.quiz-unavailable { display:flex;min-height:420px;align-items:center;justify-content:center;flex-direction:column;gap:16px; }
.quiz-board-empty { padding:20px;margin:0;color:var(--muted);font-size:13px; }
.quiz-error:empty { display:none; }.quiz-error { color:#893c32;margin:8px 0 0;font-size:13px; }
.quiz-admin-tools { display:flex;gap:12px;align-items:end;margin:16px 0;flex-wrap:wrap; }.quiz-admin-tools label { width:180px; }
.quiz-admin-layout { display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start; }
.quiz-calendar { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px; }
.quiz-weekday { text-align:center;font-size:11px;font-weight:600;padding:5px 0; }
.quiz-calendar button { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 2px;min-width:0;background:white;border:1px solid #c6dcf0;border-radius:6px; }
.quiz-calendar button strong { font-size:15px; }.quiz-calendar button span { font-size:9px; }
.quiz-calendar button.is-reviewed { background:#fff5d5;border-color:#e8c665; }.quiz-calendar button.is-published { background:#e5f3e9;border-color:#9cc5a8; }
.quiz-calendar button[aria-pressed="true"] { outline:2px solid #0874b8;outline-offset:1px; }
.quiz-calendar-key,.quiz-method { font-size:12px;color:var(--muted); }.quiz-method summary { cursor:pointer;font-weight:600; }
.quiz-day-heading { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }.quiz-day-heading h3 { margin:0 auto 0 0; }
.quiz-day-heading button { padding:8px 12px;font-size:12px; }.quiz-state { font-size:11px;border-radius:20px;background:#fff2ca;padding:4px 10px; }.quiz-state.published { background:#e5f3e9; }
.quiz-day-notes { font-size:12px;color:var(--muted);line-height:1.6; }
.quiz-admin-question { display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid #c6dcf0;align-items:start; }
.quiz-admin-question img { width:96px;aspect-ratio:15/11;object-fit:contain;border-radius:6px;background:#f6f8f5; }
.quiz-admin-question h4 { margin:0 0 5px;font-size:14px; }.quiz-admin-question p { font-size:12px;margin:3px 0; }.quiz-admin-question small { font-size:11px;color:var(--muted); }.quiz-admin-question button { padding:6px 10px;font-size:12px; }
.quiz-answer-correct { font-weight:600; }.quiz-admin-question .quiz-review-issue { color:#8b5e15; }
.quiz-review-form { display:grid;gap:14px;max-width:640px;margin:0 auto; }.quiz-review-form input { width:100%; }.quiz-review-form label { display:grid;gap:5px; }.quiz-review-form input[readonly] { background:#eff4f8; }
.quiz-pool-tools { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px; }.quiz-pool-tools label { flex:1; }.quiz-pool-tools select { width:100%; }.quiz-pool-tools span { font-size:12px; }
@media(max-width:800px){.quiz-admin-layout { grid-template-columns:1fr; }.quiz-calendar { max-width:480px; }.quiz-admin-question { grid-template-columns:72px minmax(0,1fr) auto;gap:8px; }.quiz-admin-question img { width:72px; }.quiz-admin-tools { gap:8px; }.quiz-admin-tools button { font-size:12px;padding:10px; }}

.mobile-more-sheet nav #mobile-daily-quiz { display:flex;align-items:center;gap:12px;text-align:left;padding:16px;border:1px solid #e8c665;border-radius:8px;background:#fff5d5;color:var(--ink);font:inherit;font-weight:600; }

/* Shared bird identity and taxonomy review. */
.catalog-modes{display:flex;gap:8px;margin:16px 0}.catalog-modes [aria-pressed="true"]{background:#ffe28b;border-color:#dbb848}
.catalog-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:#fff;border:1px solid #c8dded;border-radius:8px;margin-bottom:8px}
.catalog-row>div{min-width:0}.catalog-row strong,.catalog-row em,.catalog-row span,.catalog-row small{display:block}.catalog-row small,.catalog-aliases small{color:#5e7690;font-size:12px}.catalog-row button{flex-shrink:0}.catalog-row em{font-size:12px}
.catalog-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.catalog-wide{grid-column:1/-1}.catalog-fields label,#catalog-retain label,#catalog-change>label{display:grid;gap:5px}.catalog-confirm{display:flex!important;align-items:center;gap:10px;margin:16px 0}.catalog-confirm input{width:18px!important;height:18px!important;flex-shrink:0}.catalog-note{background:#fff7df;padding:12px;border-radius:7px;font-size:13px}.catalog-aliases{padding-left:20px}.catalog-aliases li{margin:5px 0}#catalog-retain button{margin-top:12px}
@media(max-width:600px){.catalog-fields{grid-template-columns:1fr}.catalog-row{padding:11px;gap:8px}.catalog-row strong{font-size:13px}.catalog-row button{padding:8px}.catalog-row small{font-size:11px}}

@media(max-width:600px){#catalog-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}#catalog-filters label:first-child{grid-column:1/-1}#catalog-filters select{width:100%}}

/* Dense catalog list; detailed identity metadata stays in the editor. */
#catalog-results .catalog-table-scroll { width:100%; box-sizing:border-box; overflow-x:auto; border:1px solid #c8dded; border-radius:7px; background:#fff; }
#catalog-results .catalog-bird-table { width:100%; min-width:640px; table-layout:fixed; border-collapse:collapse; font-size:12px; line-height:1.4; }
.catalog-current-col { width:250px; }.catalog-alternate-col { width:290px; }.catalog-scientific-col { width:auto; }.catalog-action-col { width:72px; }
#catalog-results .catalog-bird-table th { padding:9px 10px; background:#e1effc; color:#4c6881; text-align:left; font-size:11px; font-weight:600; }
#catalog-results .catalog-bird-table td { padding:5px 10px; border-top:1px solid #dbe8f2; vertical-align:middle; overflow-wrap:anywhere; }
#catalog-results .catalog-bird-table strong { font-size:12px; font-weight:600; }
#catalog-results .catalog-alternate-names,#catalog-results .catalog-scientific-name { color:#607891; font-size:11px; }
#catalog-results .catalog-bird-table button { min-height:28px; padding:3px 8px; font-size:11px; line-height:1.4; border-radius:5px; }
#catalog-results .catalog-bird-table td:last-child { text-align:right; }
.catalog-historical { display:block; font-size:10px; color:#607891; }
.catalog-review-needed { display:block; width:fit-content; font-size:10px; color:#805c15; background:#fff4d3; border-radius:4px; padding:2px 5px; }


/* Shared admin rhythm: all seven sections, without changing their data layouts. */
.admin-layout { --admin-gap:12px; --admin-label-gap:4px; --admin-control-height:42px; }
.admin-layout .admin-tabs { margin-bottom:var(--admin-gap); }
#admin-section,
#admin-section .image-audit,
#admin-section #target-editor,
#admin-section #target-form { display:grid; gap:var(--admin-gap); min-width:0; align-content:start; }
#admin-section>*,
#admin-section .image-audit>*,
#admin-section #target-editor>*,
#admin-section #target-form>* { margin-top:0; margin-bottom:0; min-width:0; }
#admin-section>:empty,
#admin-section #target-status:empty,
#admin-section #image-audit-pages:empty { display:none; }
#admin-section .admin-tips-heading,
#admin-section .target-heading,
#admin-section #admin-totals,
#admin-section #admin-rarity-total {
  box-sizing:border-box; min-height:42px; height:auto; padding:3px 12px;
  margin:0; gap:8px; line-height:20px;
}
#admin-section .admin-tips-heading h2,
#admin-section .target-heading h2 { margin:0; font-size:15px; line-height:20px; }
#admin-section .admin-tips-heading .button { min-height:34px; height:34px; padding:5px 10px; }
#admin-section :is(.admin-filters,.image-audit-filters,.quiz-admin-tools) { margin:0; gap:var(--admin-gap); }
#admin-section :is(.admin-filters,.image-audit-filters,.quiz-admin-tools) label,
#admin-section .target-month {
  display:grid; align-content:start; gap:var(--admin-label-gap);
  font-size:13px; font-weight:600; line-height:20px; margin:0;
}
#admin-section :is(.admin-filters,.image-audit-filters,.quiz-admin-tools) :is(input,select),
#admin-section .target-month select,
#admin-section .target-card input {
  box-sizing:border-box; height:var(--admin-control-height); min-height:var(--admin-control-height);
  margin:0; padding:8px 10px; font-size:14px; line-height:20px;
}
#admin-section :is(.admin-filters,.quiz-admin-tools)>button {
  box-sizing:border-box; height:var(--admin-control-height); min-height:var(--admin-control-height);
  margin:0; padding:8px 12px; font-size:13px; line-height:20px;
}
#admin-section #catalog-filters { display:grid; grid-template-columns:minmax(0,1fr); }
#admin-section #catalog-filters label { min-width:0; }
#admin-section #admin-rarity-status { margin:0; min-height:0; }
#admin-section .data-wrap,
#admin-section #admin-tip-list:not(:empty) { margin:0; }
#admin-section .target-fields,
#admin-section .quiz-admin-layout { gap:var(--admin-gap); }
#admin-section .target-card { padding:12px; }
#admin-section .target-card label { margin:0 0 var(--admin-label-gap); line-height:20px; }
#admin-section .target-actions { margin:0; gap:8px; }
#admin-section .image-audit { min-width:940px; }
#admin-section #image-audit-list { display:grid; gap:var(--admin-gap); }
#admin-section .image-audit-row { margin:0; padding:12px; gap:var(--admin-gap); }
#admin-section .admin-tip-card { padding:12px; gap:var(--admin-gap); }
#admin-section .quiz-admin-question { padding:12px 0; }
#admin-section .admin-mobile-users>.admin-user-card { padding-top:12px; padding-bottom:12px; }
#admin-section .admin-rarities :is(th,td),
#admin-section .admin-table :is(th,td) { padding-top:12px; padding-bottom:12px; }
@media(max-width:760px) {
  /* Preserve the four-season mobile rarity row and compact catalog rows. */
  #admin-section .admin-rarities td { padding-top:0; padding-bottom:0; }
  #admin-section .admin-rarities tr { padding:12px; }
}

/* Allow the shared 3px outline plus 3px offset inside the image scroller.
   Negative margins preserve alignment with the other admin sections. */
#admin-section .image-audit-scroll { padding:6px; margin:-6px; }

@media(max-width:760px) {
  .catalog-current-col { width:180px; }.catalog-alternate-col { width:200px; }
}

/* Larger admin target previews use the existing 240px thumbnails. */
#admin-section .target-preview { height:176px; }
#admin-section .target-preview img { width:240px; max-width:100%; height:auto; max-height:176px; object-fit:contain; }
@media(max-width:760px) {
  #admin-section .target-card { grid-template-columns:minmax(0,1fr) 120px; }
  #admin-section .target-preview { height:88px; }
  #admin-section .target-preview img { width:120px; max-height:88px; }
}

/* Admin searches use regular-weight text rather than inheriting bold labels. */
#admin-section input[type="search"] { font-weight:400; color:#526b82; }
#admin-section input[type="search"]::placeholder { font-weight:400; color:#718397; opacity:1; }

/* One title-bar treatment across all seven admin sections. */
#admin-section :is(.admin-tips-heading,.target-heading,#admin-totals,#admin-rarity-total) {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  box-sizing:border-box; min-height:42px; padding:3px 12px; margin:0;
  background:#fff7df; border:1px solid #e5cf8a; border-radius:8px;
  color:#153452; font-size:15px; font-weight:600; line-height:20px;
}
#admin-section :is(.admin-tips-heading,.target-heading) h2 {
  margin:0; color:inherit; font-size:15px; font-weight:600; line-height:20px; letter-spacing:normal;
}
#admin-section :is(#catalog-total,#image-audit-count,#quiz-schedule-count,#admin-user-count,#admin-rarity-count) {
  font-size:12px; font-weight:500; line-height:20px; text-align:right;
}

/* Species-level quiz review: ten unapproved sets, shared thumbnails. */
#guide-modal.quiz-pool-modal { width:min(1280px,96vw);max-width:96vw;height:90dvh;max-height:90dvh; }
#guide-modal.quiz-pool-modal #modal-content { padding:12px 24px;overflow:auto; }
.quiz-pool-heading { display:flex;justify-content:space-between;gap:16px;margin-bottom:8px;font-size:12px; }
#quiz-pool-status { color:#27634a; }
.quiz-pool-scroll { overflow-x:auto;padding:4px; }
.quiz-pool-row { display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr) 90px;gap:16px;align-items:center;min-width:800px;padding:6px 0;border-bottom:1px solid #c6dcf0; }
.quiz-pool-target { display:grid;grid-template-rows:53px 28px;gap:4px;justify-items:center;text-align:center;font-size:12px; }
.quiz-pool-target strong { display:flex;align-items:center;justify-content:center;line-height:1.3; }
.quiz-pool-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.quiz-pool-option { display:grid;grid-template-rows:53px 28px;gap:4px;min-width:0;justify-items:center; }
.quiz-pool-image { height:53px;display:grid;place-items:center; }
.quiz-pool-row img { width:72px;height:53px;object-fit:contain;background:#f1f4ed;border-radius:6px; }
.quiz-pool-row input { width:100%;min-width:0;padding:3px 6px;font-size:11px;height:28px;font-weight:400; }
.quiz-pool-row input[readonly] { background:#e8f3e9;color:#275c42; }
.quiz-pool-row>.button { padding:9px 10px;font-size:12px; }
.quiz-pool-row>.form-message { grid-column:2/-1;margin:0; }
.quiz-pool-row>.form-message:empty { display:none; }
.quiz-pool-no-photo { display:grid;place-items:center;width:72px;height:53px;background:#eef3f7;border-radius:6px;font-size:11px;color:#536e85; }
.quiz-pool-complete { padding:20px;text-align:center;color:#27634a; }

.quiz-pool-heading { align-items:center;flex-wrap:wrap; }
.quiz-pool-search { display:grid;gap:4px;width:480px;max-width:65%;font-size:12px; }
.quiz-pool-search input { width:100%;font-weight:400; }
.quiz-pool-pages { display:flex;justify-content:flex-end;gap:10px;margin-top:6px; }

#quiz-pool-count { margin-left:auto;white-space:nowrap; }
#quiz-pool-status:empty { display:none; }
.quiz-pool-pages button { padding:6px 12px; }

#guide-modal.quiz-pool-modal .quiz-pool-row { margin:0; }

#admin-section #quiz-similar { background:#dcefff;border-color:#85b9df;color:#0066a6; }
#admin-section #quiz-similar:hover { background:#cce6fa;border-color:#62a2d1; }

/* Fill the quiz body even while its request is pending. */
#guide-modal.daily-quiz-modal #modal-content { flex:1 1 auto;background:#f7fafc; }
#guide-modal.daily-quiz-modal #modal-content:has(>.quiz-loading) { display:grid;place-items:center; }
#guide-modal.daily-quiz-modal .quiz-loading { margin:0;padding:20px;text-align:center;background:transparent;border:0;box-shadow:none;color:var(--muted); }

.target-month-alert { padding:10px 12px;margin:0 0 12px;background:#fff7df;border:1px solid #edcf78;border-radius:6px;font-size:13px; }
.target-month-alert p { margin:0; }.target-month-alert p+p { margin-top:5px; }

.quiz-pool-filter { display:grid;gap:4px;font-size:12px; }.quiz-pool-filter select { min-height:40px;padding:7px 10px;font-size:12px; }

nav a.has-discuss-unread { position:relative; }
.discuss-unread-dot { display:block;position:absolute;right:10px;top:10px;width:9px;height:9px;min-width:9px;border-radius:50%;background:#ce3038;box-shadow:0 0 0 2px white;pointer-events:none; }
.discussion-unread { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:10px 12px;border:1px solid #c6dcf0;border-radius:6px;background:#e5f2ff;font-size:12px; }
.discussion-unread[hidden] { display:none; }.discussion-unread button { padding:6px 10px;font-size:12px;max-width:100%;text-align:left; }
@media(max-width:760px){.mobile-bottom-nav .discuss-unread-dot { top:5px;right:calc(50% - 18px); }}

@media(min-width:761px){
 .site-nav a>.discuss-unread-dot { position:static;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:auto;height:auto;min-width:0;padding:3px 8px;border-radius:12px;background:#c92b35;color:#fff;font-size:11px;font-weight:600;line-height:1.3;box-shadow:none; }
 .site-nav a>.discuss-unread-dot::after { content:"New"; }
}

@media(min-width:761px){.site-nav a.has-discuss-unread { grid-template-columns:20px minmax(0,1fr) auto; }}

@media(min-width:761px){.site-nav a.has-discuss-unread { grid-template-columns:20px max-content max-content; }.site-nav a.has-discuss-unread>.discuss-unread-dot { margin-left:-4px; }}

.hero-tip .mobile-daily-quiz { display:none; }
@media(max-width:760px){
 .overview-page .hero-overview .hero-tip { display:grid;grid-template-columns:minmax(0,1fr) 80px;column-gap:12px;row-gap:12px;align-items:center; }
 .overview-page .hero-tip .hero-donate { grid-column:1;grid-row:1;max-width:none; }
 .overview-page .hero-tip .tip-trigger { grid-column:1;grid-row:2;max-width:none; }
 .overview-page .hero-tip .mobile-daily-quiz { display:flex;position:static;grid-column:2;grid-row:1 / span 2;width:80px;height:80px;padding:6px;font-size:14px;animation:none; }
 .overview-page .hero-tip .mobile-daily-quiz:hover { background:#ffe589; }
 .overview-page .hero-tip .mobile-daily-quiz:focus-visible { outline:3px solid #0874b8;outline-offset:3px; }
}

.quiz-mobile-tabs { display:none; }
@media(max-width:760px){
 #guide-modal.daily-quiz-modal .quiz-mobile-tabs { display:grid;grid-template-columns:1fr 1fr;gap:6px;position:sticky;top:-16px;z-index:2;background:#f7fafc;padding:4px 0 10px;margin-bottom:2px; }
 .quiz-mobile-tabs [role=tab] { min-height:42px;padding:8px 10px;border:1px solid #a7c9e4;border-radius:6px;background:#e1effb;color:#0c5386;font-size:13px;font-weight:600;box-shadow:none; }
 .quiz-mobile-tabs [role=tab][aria-selected=true] { background:#ffe58e;border-color:#e7c65f;color:#153452; }
 .daily-quiz-modal .quiz-layout[data-tab=game]>.quiz-board,.daily-quiz-modal .quiz-layout[data-tab=leaderboard]>.quiz-play { display:none; }
}

/* Daily Quiz remains marked until all five answers are saved. */
.daily-quiz-trigger .quiz-reminder-dot {position:absolute;top:0;right:0;width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:#d92d3a;box-shadow:0 1px 3px #0003;pointer-events:none;}
#mobile-daily-quiz .quiz-reminder-dot {display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:#d92d3a;margin-left:8px;}

/* Center the Donate wording independently of the decorative heart. */
.hero-donate button {display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);text-align:center;}
.hero-donate .donate-emblem {justify-self:end;transform:translateX(8px);}
.hero-donate button > span:last-child {grid-column:2;text-align:center;transform:translateX(8px);}

/* Balance Bird Tip copy as a centered stack beside the lightbulb. */
.overview-page .hero-tip .tip-trigger {grid-template-columns:44px minmax(0,1fr) 28px;column-gap:8px;padding-left:12px;padding-right:12px;text-align:center;}
.overview-page .hero-tip .tip-label {align-items:center;text-align:center;}
.overview-page .hero-tip .tip-action {justify-self:center;}
@media(max-width:760px){
 .overview-page .hero-tip .tip-trigger {grid-template-columns:28px minmax(0,1fr);column-gap:9px;}
}

.overview-page .hero-tip .tip-kicker {white-space:nowrap;}

@media (min-width:761px) {
 #modal-content #observation-results>.observation-help {font-size:16px;line-height:1.7;}
}

/* Keep modal gestures inside the dialog and freeze background scroll containers. */
html:has(dialog:modal),
body.explorer:has(dialog:modal) {
  overflow: hidden;
  overscroll-behavior: none;
}
body.explorer:has(dialog:modal) .workspace-content {
  overflow: hidden;
}
dialog:modal,
dialog:modal #modal-content {
  overscroll-behavior: contain;
}
dialog:modal::backdrop {
  touch-action: none;
}

.crop-search-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
#crop-search-status { font-size:12px;line-height:1.5; }
#crop-search-status:empty { display:none; }