/* Classic /kus/246 desktop guide only; mobile and /app PWA unaffected. */
@media (min-width: 761px) {
  #ref246-observation-guide {
    --guide-ink: #173c2d;
    --guide-muted: #5f7167;
    --guide-green: #176a4b;
    --guide-line: #d9e8de;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: clamp(22px, 3vw, 36px);
    overflow: hidden;
    border: 1px solid var(--guide-line);
    border-radius: 24px;
    background: #f7faf7;
    color: var(--guide-ink);
    box-shadow: 0 16px 48px rgba(16, 55, 36, .08);
  }
  #ref246-observation-guide *,
  #ref246-observation-guide *::before,
  #ref246-observation-guide *::after { box-sizing: border-box; }
  #ref246-observation-guide button,
  #ref246-observation-guide input { font: inherit; }
  #ref246-observation-guide button { cursor: pointer; }
  #ref246-observation-guide [hidden] { display: none !important; }
  #ref246-observation-guide .ref246-guide-head,
  #ref246-observation-guide .ref246-quick-head,
  #ref246-observation-guide .ref246-tool-head,
  #ref246-observation-guide .ref246-check-head,
  #ref246-observation-guide .ref246-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  #ref246-observation-guide .ref246-guide-head { align-items: end; }
  #ref246-observation-guide .ref246-eyebrow,
  #ref246-observation-guide .ref246-quick-kicker,
  #ref246-observation-guide .ref246-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--guide-green);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .025em;
  }
  #ref246-observation-guide .section-title { margin: 7px 0 0; color: #0f3827; font-size: clamp(1.35rem, 2vw, 1.75rem); }
  #ref246-observation-guide .ref246-guide-badge,
  #ref246-observation-guide .ref246-quick-rule {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e6f3ea;
    color: #246447;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
  }
  #ref246-observation-guide .species-tabs-carousel { min-width: 0; margin: 22px 0; }
  #ref246-observation-guide .species-tabs-arrow { display: none; }
  #ref246-observation-guide .ref246-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--guide-line);
    border-radius: 15px;
    background: #ecf4ed;
  }
  #ref246-observation-guide .ref246-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #385948;
    font-size: .81rem;
    font-weight: 800;
  }
  #ref246-observation-guide .ref246-tab.is-active,
  #ref246-observation-guide .ref246-tab[aria-selected="true"] { background: #176a4b; color: #fff; box-shadow: 0 4px 12px rgba(23, 106, 75, .18); }
  #ref246-observation-guide :is(button, a, input):focus-visible { outline: 3px solid #d39628; outline-offset: 2px; }
  #ref246-observation-guide .ref246-panel {
    min-width: 0;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--guide-line);
    border-radius: 19px;
    background: #fff;
  }
  #ref246-observation-guide .ref246-panel + .ref246-panel { margin-top: 14px; }
  #ref246-observation-guide :is(h3, h4, p) { overflow-wrap: anywhere; }
  #ref246-observation-guide h3 { margin: 5px 0 0; font-size: 1.15rem; color: #123e2a; }
  #ref246-observation-guide h4 { margin: 0; color: #153e2c; }
  #ref246-observation-guide p { line-height: 1.5; }
  #ref246-observation-guide .ref246-quick-grid,
  #ref246-observation-guide .ref246-habitat-grid,
  #ref246-observation-guide .ref246-sound-grid,
  #ref246-observation-guide .ref246-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 17px;
  }
  #ref246-observation-guide .ref246-quick-grid article,
  #ref246-observation-guide .ref246-habitat-grid article,
  #ref246-observation-guide .ref246-sound-grid article,
  #ref246-observation-guide .ref246-compare-card {
    position: relative;
    min-width: 0;
    padding: 17px;
    border: 1px solid #dceadf;
    border-radius: 15px;
    background: #f6faf6;
  }
  #ref246-observation-guide .ref246-quick-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px 12px; }
  #ref246-observation-guide .ref246-quick-grid article > i,
  #ref246-observation-guide .ref246-habitat-grid article > i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e1f1e6;
    color: var(--guide-green);
  }
  #ref246-observation-guide .ref246-quick-num { position: absolute; top: 12px; right: 13px; color: #a9ceae; font-size: 1.5rem; font-weight: 900; }
  #ref246-observation-guide .ref246-quick-grid article > div { grid-column: 2; align-self: center; padding-right: 15px; }
  #ref246-observation-guide .ref246-quick-grid strong,
  #ref246-observation-guide .ref246-sound-grid strong { display: block; color: #123e2a; }
  #ref246-observation-guide .ref246-quick-grid p,
  #ref246-observation-guide .ref246-habitat-grid p { margin: 6px 0 0; color: var(--guide-muted); font-size: .83rem; }
  #ref246-observation-guide .ref246-tool-grid,
  #ref246-observation-guide .ref246-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
  #ref246-observation-guide .ref246-tool-card,
  #ref246-observation-guide .ref246-now-card,
  #ref246-observation-guide .ref246-check-card,
  #ref246-observation-guide .ref246-dyk {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--guide-line);
    border-radius: 16px;
    background: #fbfdfa;
  }
  #ref246-observation-guide .ref246-tool-head { margin-bottom: 12px; font-weight: 800; }
  #ref246-observation-guide .ref246-tool-head span { display: inline-flex; align-items: center; gap: 7px; }
  #ref246-observation-guide .ref246-tool-head small { color: var(--guide-muted); font-size: .75rem; font-weight: 600; }
  #ref246-observation-guide .ref246-sex-stage,
  #ref246-observation-guide .ref246-flight-stage { position: relative; height: clamp(215px, 22vw, 315px); overflow: hidden; border-radius: 12px; background: #edf3ed; }
  #ref246-observation-guide .ref246-sex-stage > img,
  #ref246-observation-guide .ref246-sex-female img,
  #ref246-observation-guide .ref246-flight-stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  #ref246-observation-guide .ref246-sex-female { position: absolute; inset: 0; width: 100%; overflow: hidden; clip-path: inset(0 calc(100% - var(--ref246-sex-cut, 50%)) 0 0); }
  #ref246-observation-guide .ref246-sex-female img { max-width: none; }
  #ref246-observation-guide .ref246-sex-label { position: absolute; bottom: 12px; z-index: 2; padding: 5px 8px; border-radius: 7px; background: rgba(11, 50, 32, .86); color: #fff; font-size: .67rem; font-weight: 900; }
  #ref246-observation-guide .ref246-sex-label--m { right: 12px; }
  #ref246-observation-guide .ref246-sex-label--f { left: 12px; }
  #ref246-observation-guide .ref246-sex-divider { position: absolute; top: 0; bottom: 0; left: var(--ref246-sex-cut, 50%); z-index: 2; width: 2px; background: #fff; box-shadow: 0 0 4px #315b42; }
  #ref246-observation-guide .ref246-sex-divider i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--guide-green); box-shadow: 0 3px 11px #385a4666; transform: translate(-50%, -50%); }
  #ref246-observation-guide .ref246-sex-range { display: block; width: 100%; min-height: 38px; margin: 4px 0 0; accent-color: var(--guide-green); }
  #ref246-observation-guide .ref246-sex-tool > p { margin: 6px 0 0; color: var(--guide-muted); font-size: .83rem; }
  #ref246-observation-guide .ref246-flight-stage > img { object-fit: contain; }
  #ref246-observation-guide .ref246-flight-path { position: absolute; inset: 0; pointer-events: none; }
  #ref246-observation-guide .ref246-tail-callout { position: absolute; right: 10px; bottom: 10px; left: 10px; display: grid; gap: 4px; padding: 9px 11px; border-radius: 10px; background: rgba(13, 54, 35, .9); color: #fff; font-size: .72rem; }
  #ref246-observation-guide .ref246-tail-callout strong { font-size: .78rem; }
  #ref246-observation-guide .ref246-flight-warning { display: flex; gap: 7px; margin: 10px 0; color: #7b4a15; font-size: .8rem; }
  #ref246-observation-guide .ref246-replay { min-height: 42px; padding: 8px 12px; border: 1px solid #b9d7c2; border-radius: 10px; background: #e8f5ea; color: var(--guide-green); font-weight: 800; }
  #ref246-observation-guide .ref246-now-card { display: grid; grid-template-columns: 40px 1fr; align-content: start; gap: 12px; }
  #ref246-observation-guide .ref246-now-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e1f1e6; color: var(--guide-green); }
  #ref246-observation-guide .ref246-now-card span,
  #ref246-observation-guide .ref246-check-head span { display: block; margin-bottom: 6px; color: var(--guide-muted); font-size: .74rem; }
  #ref246-observation-guide .ref246-now-card p { margin: 8px 0 0; }
  #ref246-observation-guide .ref246-check-card label { display: flex; align-items: start; gap: 8px; margin-top: 8px; padding: 8px 0; border-top: 1px solid #e5eee6; font-size: .82rem; }
  #ref246-observation-guide .ref246-check-card input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--guide-green); }
  #ref246-observation-guide .ref246-check-card [data-species-result] { margin: 10px 0 0; color: var(--guide-green); font-size: .8rem; }
  #ref246-observation-guide .ref246-dyk { display: flex; gap: 12px; margin-top: 15px; background: #fff8e7; border-color: #f1dfb9; }
  #ref246-observation-guide .ref246-dyk > i { color: #ad7613; }
  #ref246-observation-guide .ref246-dyk p { margin: 5px 0 0; font-size: .84rem; }
  #ref246-observation-guide .ref246-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
  #ref246-observation-guide .ref246-month { min-width: 0; padding: 12px; border: 1px solid var(--guide-line); border-radius: 12px; background: #f7faf7; }
  #ref246-observation-guide .ref246-month strong { display: block; margin-bottom: 5px; color: var(--guide-green); }
  #ref246-observation-guide .ref246-month span { color: var(--guide-muted); font-size: .78rem; }
  #ref246-observation-guide .ref246-habitat-grid article > i { margin-bottom: 8px; }
  #ref246-observation-guide .ref246-habitat-grid h4 { margin: 0; font-size: .9rem; }
  #ref246-observation-guide .ref246-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ref246-observation-guide .ref246-compare-card h4 { margin: 7px 0 0; }
  #ref246-observation-guide .ref246-compare-card em { display: block; margin: 4px 0 10px; color: var(--guide-muted); font-size: .76rem; }
  #ref246-observation-guide .ref246-compare-card dl { margin: 0; }
  #ref246-observation-guide .ref246-compare-card dl div { margin-top: 7px; }
  #ref246-observation-guide .ref246-compare-card dt { font-weight: 800; }
  #ref246-observation-guide .ref246-compare-card dd { margin: 2px 0 0; color: var(--guide-muted); font-size: .82rem; }
  #ref246-observation-guide .ref246-breeding-line { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
  #ref246-observation-guide .ref246-breeding-line li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 11px; border: 1px solid var(--guide-line); border-radius: 12px; background: #f7faf7; }
  #ref246-observation-guide .ref246-breeding-line li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dcefe1; color: var(--guide-green); font-weight: 900; }
  #ref246-observation-guide .ref246-breeding-line strong,
  #ref246-observation-guide .ref246-breeding-line em { display: block; font-style: normal; }
  #ref246-observation-guide .ref246-breeding-line em { margin-top: 3px; color: var(--guide-muted); font-size: .82rem; }
  #ref246-observation-guide .ref246-sound-grid article { display: grid; gap: 5px; }
  #ref246-observation-guide .ref246-sound-grid span { color: var(--guide-muted); font-size: .82rem; }
  #ref246-observation-guide .ref246-inline-audio { margin-top: 16px; }
  #ref246-observation-guide .ref246-inline-audio h4 { margin-bottom: 8px; }
  #ref246-observation-guide .ref246-sources { display: flex; justify-content: space-between; gap: 20px; }
  #ref246-observation-guide .ref246-sources h3 { margin: 0; }
  #ref246-observation-guide .ref246-sources p { margin: 7px 0 0; color: var(--guide-muted); font-size: .82rem; }
  #ref246-observation-guide .ref246-source-links { display: grid; gap: 9px; justify-items: start; min-width: 210px; }
  #ref246-observation-guide .ref246-source-links a { color: var(--guide-green); font-weight: 800; }
  #ref246-observation-guide .ref246-source-links span { color: var(--guide-muted); font-size: .78rem; }
}

/* The classic page keeps a sidebar at laptop widths, leaving a narrow guide column. */
@media (min-width: 761px) and (max-width: 1100px) {
  #ref246-observation-guide .ref246-quick-grid,
  #ref246-observation-guide .ref246-tool-grid,
  #ref246-observation-guide .ref246-action-grid,
  #ref246-observation-guide .ref246-habitat-grid,
  #ref246-observation-guide .ref246-sound-grid,
  #ref246-observation-guide .ref246-compare-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #ref246-observation-guide .ref246-months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 761px) {
  #ref246-observation-guide .ref246-quick-grid article > div { padding-right: 36px; }
  #ref246-observation-guide .ref246-quick-num { top: 10px; right: 10px; font-size: 1.2rem; }

  /* The map sidebar's record chart is separate from the field-guide tabs. */
  .ref246-mini-phenology { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e2e8e6; }
  .ref246-mini-phenology-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .ref246-mini-phenology-head h4 { margin: 0; color: #173b2d; font-size: .87rem; line-height: 1.3; }
  .ref246-mini-phenology-head > span { flex: none; color: #64748b; font-size: .75rem; }
  .ref246-mini-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; margin-top: 11px; }
  .ref246-mini-month { display: grid; grid-template-rows: 72px 18px; justify-items: center; min-width: 0; }
  .ref246-mini-bar { display: block; align-self: end; width: min(100%, 15px); min-height: 3px; border-radius: 4px 4px 0 0; background: #29895d; }
  .ref246-mini-month em { align-self: end; color: #475569; font-size: .68rem; font-style: normal; line-height: 1; white-space: nowrap; }
  .ref246-mini-phenology > p { margin: 11px 0 0; color: #64748b; font-size: .74rem; line-height: 1.45; }
}