/* Shared Now surfaces. Page-specific map dimensions and status colors stay local. */
:root {
    --now-primary: #f97316;
    --now-secondary: #002f5f;
    --now-border: #dce3ea;
    --now-ink: #203448;
    --now-muted: #627487;
    --now-radius: 9px;
    --sky-navy: var(--now-secondary);
    --sky-orange: var(--now-primary);
    --sky-border: var(--now-border);
    --sky-muted: var(--now-muted);
    --field-navy: var(--now-secondary);
    --field-orange: var(--now-primary);
    --field-line: var(--now-border);
}

body[data-now-page] .drs-body {
    --drs-accent: var(--now-primary);
    --drs-line: var(--now-border);
}

body[data-now-page].drs-write-page {
    --write-accent: var(--now-primary);
    --write-border: var(--now-border);
}

body[data-now-page] :where(main, .now-page, .sky-dialog, .sky-detail-wrap, #drs-dialog-root) {
    font-family: inherit;
    color-scheme: light;
    -webkit-tap-highlight-color: transparent;
}

body[data-now-page] :where(main, .now-page, .sky-dialog, .sky-detail-wrap, #drs-dialog-root) :where(button, input, select, textarea) {
    font-family: inherit;
}

body[data-now-page] :where(main, .now-page, .sky-dialog, .sky-detail-wrap, #drs-dialog-root) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--now-secondary);
    outline-offset: 3px;
}

body[data-now-page] :where(.sky-btn, .drs-btn-primary, .drs-btn-ghost, .now-account-button, .field-primary, .field-submit, .drs-button) {
    border-radius: var(--now-radius);
    font-weight: 650;
    min-height: 40px;
}

body[data-now-page] :where(main, .sky-dialog, #drs-dialog-root) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    border-radius: var(--now-radius);
}

body[data-now-page].drs-write-page .drs-write-shell {
    width: min(100% - 48px, 1160px);
}

body[data-now-page] .sky-write-root {
    padding-inline: max(24px, calc((100vw - 1160px) / 2));
}

body[data-now-page] :is(.drs-write-header, .sky-write-root .sky-page-head) h1 {
    font-size: clamp(27px, 3vw, 34px);
    line-height: 1.35;
    color: var(--now-secondary);
}

body[data-now-page] :where(.sky-title, .drs-write-header h1, .field-panel-top h1, .now-me-heading h1, .drs-about h1) {
    color: var(--now-secondary);
}

body[data-now-page] :where(.sky-breadcrumb, .now-me-breadcrumb, .drs-back-link, .drs-help-link, .field-about-link) {
    font-size: 13px;
}

body[data-now-page] .now-card-guide {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin-top: auto;
    padding: 12px 22px;
    border-top: 1px solid var(--now-border);
    color: var(--now-secondary);
    font-size: 13px;
    font-weight: 650;
}

body[data-now-page] .now-card-guide:hover {
    background: #f5f7fa;
    text-decoration: underline;
}

body[data-now-page] :is(.sky-btn-primary, .now-nickname-save, .field-primary-button):not(:disabled),
body[data-now-page] :is(.drs-btn-primary, .drs-add-button) {
    color: #321a0b;
}

body[data-now-page] :is(.sky-breadcrumb, .sky-write-small, .sky-field-optional, .sky-form-heading > span) {
    color: #526579;
}

body[data-now-page] .sky-write-small {
    font-size: 13px;
    line-height: 1.7;
}

body[data-now-page] :is(.sky-card-meta, .sky-anonymous-label small, .sky-char-count) {
    color: #526579;
    font-size: 12px;
}

body[data-now-page] .now-me :is(.now-me-record-meta, .now-me-record-bottom) {
    font-size: 12px;
}

body[data-now-page] .now-me .now-me-record-description {
    color: #526579;
    font-size: 13px;
}

body[data-now-page] .field-body :is(.field-hint-text, .field-legal-note, .field-location-copy span, .field-meta, .field-pane-head > span, .field-layer-message) {
    color: #526579;
    font-size: 12px;
    line-height: 1.65;
}

body[data-now-page] .field-body :is(.field-choice-text, .field-question, .field-summary-question strong, .field-checkrow, .field-result-row, .field-level-description) {
    font-size: 14px;
    line-height: 1.65;
}

body[data-now-page] .field-body .field-checkrow input {
    margin-top: 3px;
}

body[data-now-page] .field-body :is(.field-map-button, .field-small-button, .field-layer-segments button, .field-switch button) {
    min-height: 44px;
    font-size: 12px;
}

body[data-now-page] .field-map-pane {
    container-type: inline-size;
}

body[data-now-page] .field-cell-head .field-cell-answer-text {
    border-left: 4px solid var(--field-result-tone, transparent);
    padding-left: 10px;
    color: var(--now-ink);
    font-size: 14px;
}

body[data-now-page] .field-body :is(.field-choice:nth-child(-n+4) .field-choice-num, .field-legend-colors span:nth-child(-n+4)) {
    color: #172333;
}

body[data-now-page] .field-body .field-no-data-legend {
    display: flex;
    color: #526579;
}

body[data-now-page] .drs-body {
    --drs-sub: #526579;
}

body[data-now-page] .drs-body :is(.drs-phenomenon-observed, .drs-timeline-observation-time, .drs-timeline-rail-caption) {
    color: #526579;
    font-size: 12px;
}

body[data-now-page].drs-write-page .drs-location-feedback:empty {
    display: none;
}

@container (max-width: 420px) {
    body[data-now-page] .field-map-controls-right {
        top: 128px;
        left: 12px;
        right: auto;
    }
}

body[data-now-page] :where(.sky-dialog, .now-nickname-dialog, .now-delete-dialog, .drs-dialog) {
    border-radius: 14px;
}

body[data-now-page] :where(main, .now-page, .sky-dialog, .sky-detail-wrap, #drs-dialog-root) button[aria-busy="true"] {
    position: relative;
    cursor: wait;
}

body[data-now-page] :where(main, .now-page, .sky-dialog, .sky-detail-wrap, #drs-dialog-root) button[aria-busy="true"]:not([data-now-busy-icon])::before,
body[data-now-page] button[data-now-busy-icon]::after {
    content: '';
    display: inline-block;
    flex: 0 0 12px;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: now-request-spin .75s linear infinite;
}

body[data-now-page] button[data-now-busy-icon]>* {
    visibility: hidden;
}

body[data-now-page] button[data-now-busy-icon]::after {
    position: absolute;
    left: calc(50% - 6px);
    top: calc(50% - 6px);
    margin: 0;
}

@keyframes now-request-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (pointer: coarse) {
    body[data-now-page] :where(.sky-btn, .drs-btn-primary, .drs-btn-ghost, .now-account-button, .field-primary, .field-submit, .drs-button) {
        min-height: 44px;
    }
}

@media (max-width: 550px) {
    body[data-now-page] .sky-write-root {
        padding-inline: 16px;
    }

    body[data-now-page].drs-write-page .drs-write-shell {
        width: calc(100% - 32px);
    }

    body[data-now-page] :where(main, .sky-dialog, #drs-dialog-root) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    body[data-now-page] :where(main, .now-page, .sky-dialog, .sky-detail-wrap, #drs-dialog-root) button[aria-busy="true"]:not([data-now-busy-icon])::before,
    body[data-now-page] button[data-now-busy-icon]::after {
        animation: none;
    }
}

body[data-now-page] #w-pending {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #d9ad56;
    border-radius: var(--now-radius);
    background: #fff9ed;
    color: var(--now-ink);
}

body[data-now-page] #w-pending h2 {
    font-size: 18px;
    margin: 0 0 8px;
}

body[data-now-page] #w-pending p {
    font-size: 14px;
    line-height: 1.6;
}

body[data-now-page] #sky-list-status:not([hidden]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}