/* Custom styles — base styling handled by TailwindCSS CDN in base.html */

/*
 * Essential Leaflet layout fallback. The complete Leaflet stylesheet is loaded
 * from the CDN, but these rules prevent map tiles from entering normal document
 * flow if that stylesheet is delayed or unavailable.
 */
#address-map {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 18rem;
    overflow: hidden;
    background: #ddd;
}

@media (min-width: 640px) {
    #address-map {
        height: 20rem;
    }
}

#address-map .leaflet-pane,
#address-map .leaflet-tile,
#address-map .leaflet-marker-icon,
#address-map .leaflet-marker-shadow,
#address-map .leaflet-tile-container,
#address-map .leaflet-pane > svg,
#address-map .leaflet-pane > canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#address-map .leaflet-pane { z-index: 400; }
#address-map .leaflet-tile-pane { z-index: 200; }
#address-map .leaflet-overlay-pane { z-index: 400; }
#address-map .leaflet-shadow-pane { z-index: 500; }
#address-map .leaflet-marker-pane { z-index: 600; }
#address-map .leaflet-tooltip-pane { z-index: 650; }
#address-map .leaflet-popup-pane { z-index: 700; }
#address-map .leaflet-tile { visibility: hidden; }
#address-map .leaflet-tile-loaded { visibility: inherit; }

/* Wizard layout stays usable independently of the optional CDN styles. */
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f7f8fa; color: #172c40; }
body > nav { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
button, select, input, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #368bb8; outline-offset: 3px; }
.wizard-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.wizard-heading [role="status"] { font-size: .875rem; }
/* The form owns its own vertical rhythm: flex gap ignores the hidden state/CSRF
   leading children, so the first visible step card starts flush with the sidebar. */
[data-protocol-form] { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
[data-protocol-form] > .wizard-delete { align-self: start; }
.wizard-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: 1rem; border: 1px solid #d6dfe6; border-radius: .65rem; background: white; margin-bottom: 1rem; }
.wizard-progress select { min-width: 0; max-width: 100%; padding: .65rem; border: 1px solid #bac9d4; border-radius: .4rem; flex: 1; }
.wizard-step-list { display: none; }
[data-step-position] { white-space: nowrap; font-size: .875rem; }
/* Step cards own their chrome here rather than in template utilities: the
   sidebar padding is derived from this 1.25rem inset, and the cards keep their
   shape when the Tailwind CDN is unavailable. */
.wizard-step { min-width: 0; margin: 0; padding: 1.25rem; background: white; border-radius: .5rem; box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a; }
.wizard-step > legend, .wizard-step > h2 { font-size: 1.1rem; font-weight: 700; }
/* Browsers paint a fieldset's background from the middle of its <legend>, which
   would start the step card lower than the sidebar card. Floating the legend puts
   it in normal flow inside the card, so the card paints from its own top edge and
   the title picks up the card's ordinary padding. */
.wizard-step > legend { float: left; padding: 0; line-height: 1.5rem; }
.wizard-step > legend + * { clear: both; }
.wizard-step input[type="radio"], .wizard-step input[type="checkbox"] { min-width: 1.15rem; min-height: 1.15rem; accent-color: #1a3c5e; }
.wizard-step label:has(input[type="radio"]), .wizard-step label:has(input[type="checkbox"]) { min-height: 2rem; font-size: .95rem; line-height: 1.25; gap: .55rem; }
.wizard-step .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .2rem; }
.slider-field { min-width: 0; max-width: 32rem; }
.slider-slot { min-height: 4.5rem; }
.slider-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .75rem; align-items: center; }
.slider-row input[type="range"] { width: 100%; min-height: 2.75rem; accent-color: #1a3c5e; }
.slider-row input[type="range"].slider-unset { opacity: .55; }
.slider-row input[type="number"] { min-height: 2.75rem; }
.wizard-controls { position: sticky; bottom: 0; z-index: 700; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: center; box-sizing: border-box; background: rgba(255, 255, 255, .97); padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom)); border: 1px solid #d6dfe6; border-radius: .75rem .75rem 0 0; box-shadow: 0 -5px 18px #172c401a; backdrop-filter: blur(8px); }
.wizard-controls-center { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.wizard-controls-right { justify-self: end; }
.wizard-button, .step-photos button, .photo-file-label, .review-section button, .protocol-actions button, .wizard-notice button { border: 1px solid #bac9d4; border-radius: .55rem; padding: .7rem 1rem; min-height: 2.75rem; background: white; color: #1a3c5e; font-weight: 650; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.wizard-button:hover:not(:disabled) { background: #f0f4f8; border-color: #849baa; box-shadow: 0 2px 5px #172c4014; }
.wizard-button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.wizard-button-back { border-color: #8fa4b3; background: #f8fafb; }
.wizard-button-next { min-width: 7rem; border-color: #1a3c5e; background: #1a3c5e; color: white; box-shadow: 0 2px 6px #1a3c5e33; }
.wizard-button-next:hover:not(:disabled) { border-color: #15304d; background: #15304d; }
.wizard-button-secondary { color: #445964; background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: .2rem; }
.wizard-button-secondary:hover:not(:disabled) { border-color: #d6dfe6; text-decoration: none; }
.wizard-button-retry { border-color: #b86d16; color: #8a4b08; background: #fff8e8; }
.step-photos { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #d6dfe6; }
.step-photos h2, .review-section h3, [data-photo-overview] h3, .protocol-card h2 { font-size: 1rem; font-weight: 700; margin: .5rem 0; }
[data-photo-count] { font-size: .85rem; font-weight: normal; margin-left: .5rem; }
.photo-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-file-label { cursor: pointer; position: relative; display: inline-flex; align-items: center; }
.photo-file-label:focus-within { outline: 3px solid #368bb8; }
.photo-file-label input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.photo-grid figure { min-width: 0; margin: 0; background: #f7f9fb; border: 1px solid #d6dfe6; border-radius: .5rem; padding: .75rem; }
.photo-grid img { width: 100%; height: 11rem; object-fit: contain; }
.photo-grid textarea { width: 100%; box-sizing: border-box; border: 1px solid #bac9d4; border-radius: .35rem; padding: .5rem; margin: .35rem 0; }
.photo-grid label, .photo-grid [role="status"] { display: block; font-size: .85rem; margin-top: .5rem; }
.wizard-notice, [data-wizard-message] { padding: .85rem; background: #fff6df; border-radius: .5rem; }
[data-conflict-panel], [data-wizard-message] { margin: 1rem 0; }
.wizard-notice a, .protocol-card a { text-decoration: underline; }
[data-unsaved-copy] { width: 100%; min-height: 12rem; }
.field-error { font-size: .85rem; color: #ae2424; margin: .25rem 0; }
.wizard-step [aria-invalid="true"], [aria-invalid="true"] { border-color: #ae2424; }
.review-section { margin-top: 1rem; border-top: 1px solid #d6dfe6; padding: 1rem 0; }
.review-section h3 { display: inline-block; margin-right: 1rem; }
.review-section dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .5rem; margin-top: .75rem; }
.review-section dd { overflow-wrap: anywhere; white-space: pre-wrap; margin: 0; }
.review-section dt, .protocol-meta { color: #586b78; font-size: .875rem; }
.protocol-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; background: white; border: 1px solid #d6dfe6; border-radius: .65rem; padding: 1.25rem; margin: 1rem 0; }
.protocol-card-actions, .protocol-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.protocol-card-actions a { padding: .5rem 0; }
.protocol-actions { margin-bottom: 1.5rem; }
.wizard-delete { color: #ae2424; padding: .75rem; text-decoration: underline; }
@media (min-width: 768px) {
    .wizard-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
    /* Card inset .5rem + item inset .75rem = the step cards' 1.25rem text inset,
       while the active/hover pill still bleeds toward the card edge. The 1px
       subtraction accounts for this card's border, which the step cards lack, so
       both content boxes start on exactly the same x and y. */
    .wizard-progress { position: sticky; top: 1rem; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .5rem; margin: 0; padding: calc(1.25rem - 1px) calc(.5rem - 1px); }
    .wizard-progress strong { padding: 0 .75rem; }
    .wizard-step-select-label, .wizard-progress select { display: none; }
    .wizard-step-list { display: grid; gap: .2rem; }
    .wizard-step-list button { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .45rem; align-items: center; width: 100%; border: 0; border-radius: .45rem; padding: .55rem .75rem; background: transparent; color: #445964; text-align: left; font-size: .875rem; line-height: 1.25; }
    .wizard-step-list button > span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid #bac9d4; border-radius: 50%; background: white; color: #586b78; font-size: .75rem; }
    .wizard-step-list button:hover { background: #f0f4f8; color: #1a3c5e; }
    .wizard-step-list button[aria-current="step"] { background: #e8f0f5; color: #1a3c5e; font-weight: 700; }
    .wizard-step-list button[aria-current="step"] > span { border-color: #1a3c5e; background: #1a3c5e; color: white; }
    .wizard-progress [data-step-position] { margin-top: .25rem; padding: .5rem .75rem 0; border-top: 1px solid #e4eaee; color: #586b78; }
}
@media (max-width: 640px) {
    .wizard-controls { grid-template-columns: 1fr 1fr; }
    .wizard-controls-left { grid-column: 1; grid-row: 1; }
    .wizard-controls-right { grid-column: 2; grid-row: 1; }
    .wizard-controls-center { grid-column: 1 / -1; grid-row: 2; }
    .wizard-controls-left, .wizard-controls-right, .wizard-controls-left .wizard-button, .wizard-controls-right .wizard-button { width: 100%; }
    .wizard-controls-right .wizard-button { display: block; }
    .wizard-progress > label { flex-basis: 100%; }
}