/* Scoped to the CHIRP worksheet; site theme tokens also support dark mode. */
.chirp-app { margin-bottom: 28px; }
.chirp-symbols { position: absolute; overflow: hidden; pointer-events: none; }
.chirp-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.chirp-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(125deg, var(--green-soft), var(--surface)); }
.chirp-hero > div:first-child { min-width: 0; }
body[data-page="ham-chirp"] .chirp-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.2; margin-block: 8px 14px; }
.chirp-hero h1 span { color: var(--text); }
.chirp-hero p { max-width: 54ch; line-height: 1.65; }
.chirp-hero-icon { display: grid; place-items: center; width: 88px; height: 88px; flex: 0 0 88px; border: 1px solid var(--line); border-radius: 24px; color: var(--green); background: var(--surface); }
.chirp-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chirp-hero-tags span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .9rem; font-weight: 600; }
body[data-page="ham-chirp"] .quick-nav { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding-block: 4px 12px; }
body[data-page="ham-chirp"] .quick-nav a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; font-size: .95rem; white-space: nowrap; }
body[data-page="ham-chirp"] .layout-two { grid-template-columns: minmax(0, 1fr); align-items: start; }
.chirp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.chirp-steps a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; overflow-wrap: break-word; }
.chirp-steps a > .chirp-icon { grid-column: 1; grid-row: 1; color: var(--green); }
.chirp-step-copy { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.chirp-steps strong, .chirp-steps small { display: block; font-size: 1rem; line-height: 1.5; }
.chirp-steps small { margin-top: 4px; color: var(--muted); font-size: .9rem; font-weight: 400; }
.chirp-platform { margin-bottom: 20px; }
.chirp-platform summary, .chirp-app summary { min-height: 48px; padding-block: 12px; cursor: pointer; font-weight: 700; line-height: 1.6; }
.chirp-app .field, #chirp-app [tabindex], #chirp-skipped-title { scroll-margin-block: 100px 24px; }
.chirp-step-number { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: .9rem; font-weight: 700; }
.chirp-steps a:hover, .chirp-steps a[aria-current="location"] { border-color: var(--green); background: var(--green-soft); }
.chirp-steps a[aria-current="location"] .chirp-step-number { background: var(--green); color: #fff; }
.chirp-radio-matches { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.chirp-device-note { border-left: 4px solid var(--green); padding: 14px; background: var(--soft); border-radius: 10px; margin: 16px 0; overflow-wrap: anywhere; }
.chirp-device-note p { margin: 8px 0; }
.chirp-power-warning { padding: 14px; border: 1px solid var(--line); background: var(--soft); border-radius: 10px; }
.chirp-power-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chirp-radio-matches:empty { display: none; }
.chirp-radio-matches .button { text-align: left; border: 2px solid var(--line); }
.chirp-radio-matches .button[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); font-weight: 800; }
.chirp-app .field, .chirp-app .card-body, .chirp-guide .card-body { min-width: 0; }
.chirp-app select { text-overflow: ellipsis; }
#chirp-city-audit { margin-bottom: 24px; }
#chirp-invalid-cities { max-height: 320px; overflow-y: auto; overflow-wrap: anywhere; }
#chirp-app fieldset, #chirp-preview-title, #chirp-guide { scroll-margin-top: 140px; }
.chirp-app fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 0 0 20px; }
.chirp-app legend { padding: 0 8px; font-weight: 800; color: var(--text); }
.chirp-app .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.chirp-app .field-grid > .field { min-width: 0; margin: 0; }
.chirp-options, .chirp-data-details { margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.chirp-options[open], .chirp-data-details[open] { border-color: var(--green); }
.chirp-app .chirp-option-summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 16px; list-style: none; }
.chirp-option-summary::-webkit-details-marker { display: none; }
.chirp-option-summary::marker { content: ""; }
.chirp-option-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--soft); color: var(--green); }
.chirp-option-copy { min-width: 0; }
.chirp-option-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1rem; line-height: 1.5; }
.chirp-option-copy small { display: block; margin-top: 4px; font-size: .9rem; font-weight: 400; color: var(--muted); line-height: 1.5; }
.chirp-option-tag { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; font-weight: 500; color: var(--muted); }
.chirp-chevron { color: var(--muted); transition: transform .18s ease; }
[open] > .chirp-option-summary .chirp-chevron { transform: rotate(180deg); }
.chirp-app .chirp-options > fieldset { margin: 0; padding: 20px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.chirp-options > fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chirp-data-details > p, .chirp-data-details > details { margin: 0 16px 16px; }
.chirp-app .card-head h2 { font-size: 1.25rem; line-height: 1.4; }
.chirp-app .card-head .icon-box { color: var(--green); background: var(--green-soft); }
.chirp-export { margin: 24px 0; padding: 20px; border: 2px solid var(--green); border-radius: 16px; background: var(--surface); scroll-margin-top: 100px; }
.chirp-export h3 { margin-top: 0; }
.chirp-included-cities { display: flex; flex-wrap: wrap; gap: 10px; max-height: 180px; overflow-y: auto; padding: 4px; scrollbar-gutter: stable; }
.chirp-included-cities:empty { display: none; }
.chirp-included-cities .button { margin: 0; background: var(--green-soft); color: var(--text); border: 1px solid var(--green); }
.chirp-mode-summary { padding: 12px; border-radius: 10px; background: var(--soft); font-weight: 600; line-height: 1.65; }
.chirp-primary-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; }
.chirp-primary-actions :is(img, svg) { flex: 0 0 24px; }
.chirp-app .chirp-actions { align-items: stretch; }
.chirp-app .chirp-actions > button { flex: 0 1 auto; }
.chirp-app [role="status"] { overflow-wrap: anywhere; }
.chirp-app .helper, .chirp-app .chirp-muted, body[data-page="ham-chirp"] main .note { font-size: 1rem; line-height: 1.75; color: var(--muted); }
.chirp-app input, .chirp-app select { width: 100%; min-height: 48px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; }
.chirp-app select { appearance: none; -webkit-appearance: none; padding: 12px 48px 12px 14px; border: 2px solid #879d91; font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2318352b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.chirp-app select:disabled { border-style: dashed; background-color: var(--soft); color: var(--muted); cursor: not-allowed; opacity: 1; }
.chirp-app .field > label { margin-bottom: 8px; }
#chirp-app input:not([type="checkbox"]), #chirp-app select, #chirp-app button { min-height: max(48px, 3rem); height: auto; font-size: max(16px, 1rem); line-height: 1.4; }
#chirp-app button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.chirp-app input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; min-height: 26px; padding: 0; border: 2px solid #879d91; border-radius: 7px; background: var(--surface); cursor: pointer; flex: 0 0 26px; }
.chirp-app input[type="checkbox"]:checked { border-color: var(--green); background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 22px; }
.chirp-app label { display: block; font-weight: 700; }
#chirp-app label { font-size: max(16px, 1rem); line-height: 1.6; }
.chirp-app .chirp-check { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 600; cursor: pointer; }
.chirp-app .chirp-check:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.chirp-app .chirp-check:focus-within { outline: 3px solid var(--green); outline-offset: 2px; }
.chirp-app .chirp-check > span { min-width: 0; overflow-wrap: anywhere; }
.chirp-app .chirp-check { overflow-wrap: anywhere; }
body[data-page="ham-chirp"] main a.button { min-height: max(48px, 3rem); height: auto; font-size: max(16px, 1rem); white-space: normal; }
.chirp-cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; max-height: 300px; overflow-y: auto; margin: 14px 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.chirp-cities label[hidden] { display: none; }
.chirp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; }
.chirp-actions .button { min-height: 48px; }
.chirp-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.chirp-summary > div { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.chirp-summary strong { display: block; color: var(--green); font-size: 1.8rem; }
.chirp-summary span, .chirp-muted { color: var(--muted); }
.chirp-summary > div:nth-child(2) { border-top: 4px solid #287b54; background: #eef7f1; }
.chirp-summary > div:nth-child(3) { border-top: 4px solid #ac7125; background: #fff8eb; }
.chirp-summary > div:first-child { border-top: 4px solid #3c718f; }
[data-theme="dark"] .chirp-summary > div:nth-child(2) { background: #193b2b; }
[data-theme="dark"] .chirp-summary > div:nth-child(3) { background: #3d301b; }
[data-theme="dark"] .chirp-summary > div:nth-child(3) strong { color: #ffce8b; }
.chirp-app fieldset:focus-within { border-color: #6a9c83; }
.chirp-channel-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.chirp-channel-list .repeater-card-heading h4 { margin: 5px 0 12px; font-size: 1.18rem; line-height: 1.4; }
.chirp-app .chirp-record-choice { margin: 0; padding: 12px; border: 1px solid var(--green); border-radius: 10px; background: var(--green-soft); min-height: 48px; }
.chirp-channel-list .repeater-details { min-width: 0; }
.chirp-channel-list .repeater-detail-grid dd, .chirp-channel-list .repeater-quick dd { overflow-wrap: anywhere; }
.chirp-channel-list .chirp-csv-details p { overflow-wrap: anywhere; }
.chirp-channel-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 16px; background: var(--surface); overflow-wrap: anywhere; font-size: max(16px,1rem); line-height: 1.7; }
.chirp-channel-heading { display: flex; gap: 12px; align-items: flex-start; }
.chirp-channel-heading img { flex: 0 0 40px; }
.chirp-channel-number { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; background: var(--green-soft); color: var(--text); font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.chirp-channel-heading > div { min-width: 0; }
.chirp-channel-heading h4 { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.chirp-channel-heading p, .chirp-channel-meta, .chirp-channel-offset { margin: 6px 0 12px; color: var(--muted); }
.chirp-channel-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,7rem),1fr)); gap: 10px; margin: 16px 0; }
.chirp-channel-metrics > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.chirp-channel-metrics dt { color: var(--muted); font-weight: 500; }
.chirp-channel-metrics dd { margin: 6px 0 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.chirp-channel-card small { display: block; margin: 8px 0; font-size: 1rem; color: var(--muted); }
.chirp-channel-card > a { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; }
.chirp-channel-card details { border-top: 1px solid var(--line); margin-top: 12px; }
.chirp-status-badge { display: inline-block; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); font-weight: 700; }
.chirp-status-badge[data-status="active"] { border-color: var(--green); color: var(--text); background: var(--green-soft); }
.chirp-status-badge[data-status="maintenance"], .chirp-status-badge[data-status="inactive"] { border-style: dashed; }
.chirp-skipped { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 12px 0; background: var(--soft); }
.chirp-skipped h4 { margin: 0 0 8px; }
.chirp-skipped ul { padding-left: 22px; }
.chirp-confirm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.chirp-error { padding: 14px; border: 2px solid var(--green); border-radius: 12px; font-weight: 700; }
.chirp-app :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.chirp-app button:disabled { opacity: .6; cursor: not-allowed; }
.chirp-section { margin: 26px 0; }
.chirp-section h3 { margin-bottom: 8px; }
.chirp-ack { background: var(--green-soft); border-radius: 12px; margin: 20px 0; }
.chirp-guide { margin: 26px 0; }
.chirp-guide button, .chirp-guide .button, .chirp-guide summary { min-height: max(48px, 3rem); height: auto; font-size: max(16px, 1rem); line-height: 1.5; }
.chirp-guide-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.chirp-guide-controls span { flex: 1 1 160px; text-align: center; font-weight: 700; color: var(--text); }
.chirp-slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: 16px; border: 1px solid var(--line); }
.chirp-slide { scroll-snap-align: start; min-width: 0; margin: 0; background: var(--surface); }
.chirp-slide img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; background: #eaf3ed; }
.chirp-slide > div { padding: 22px; }
.chirp-slide h3 { margin-top: 8px; overflow-wrap: anywhere; }
.chirp-slide p { font-size: 1rem; line-height: 1.8; }
.chirp-guide :focus-visible, .chirp-steps :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.chirp-guide button:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 980px) {
  body[data-page="ham-chirp"] .layout-two { grid-template-columns: minmax(0, 1fr); }
  .chirp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.native-app body[data-page="ham-chirp"] .layout-two { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 680px) {
  .chirp-hero { align-items: flex-start; padding: 20px; gap: 14px; }
  .chirp-hero-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 15px; }
  .chirp-hero-icon .chirp-icon { width: 32px; height: 32px; }
  .chirp-hero-tags { gap: 6px; }
  .chirp-app .chirp-option-summary { grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 10px; padding: 14px 12px; }
  .chirp-option-icon { width: 32px; height: 36px; border-radius: 9px; }
  .chirp-app .chirp-options > fieldset { padding: 16px 12px; }
  #chirp-app .field-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #chirp-app .card-body { padding: 16px; }
  .chirp-app .card-head { flex-wrap: wrap; gap: 12px; }
  .chirp-app .card-head > div:not(.icon-box) { flex: 1 1 160px; min-width: 0; }
  .chirp-app .chirp-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chirp-app .chirp-actions > button { width: 100%; }
  .chirp-included-cities .button { flex: 1 1 140px; }
  .chirp-export { padding: 14px; }
  .chirp-channel-metrics { grid-template-columns: minmax(0, 1fr); }
  .chirp-channel-metrics > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .chirp-channel-metrics dd { margin: 0; }
  .chirp-channel-heading img { width: 32px; height: 32px; flex-basis: 32px; }
  .chirp-app fieldset { padding: 12px; }
  .chirp-summary { gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .chirp-summary > div { display: flex; align-items: center; gap: 14px; padding: 12px; font-size: 1rem; }
  .chirp-summary strong { min-width: 3ch; font-size: 1.5rem; }
  .chirp-confirm { grid-template-columns: 1fr; }
  .chirp-channel-card { padding: 14px; }
  .chirp-power-examples { grid-template-columns: minmax(0, 1fr); }
  .chirp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .chirp-steps a { padding: 14px 12px; gap: 10px; }
  .chirp-slide > div { padding: 16px; }
  .chirp-guide-controls span { order: -1; flex-basis: 100%; }
  .chirp-guide-controls button { flex: 1 1 120px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .chirp-chevron { transition: none; } }
@media (forced-colors: active) {
  .chirp-app input[type="checkbox"], .chirp-app select { appearance: auto; -webkit-appearance: auto; background-image: none; }
}