/* ================================================================
   UAS Flight Plan — Operational Briefing Document
   styles.css
   ================================================================ */

/* ----------------------------------------------------------------
   CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
    --c-primary:      #1a3a5c;
    --c-primary-dk:   #0f2844;
    --c-primary-lt:   #2563a8;
    --c-accent:       #c0392b;
    --c-accent-lt:    #e74c3c;
    --c-success:      #1e7e34;
    --c-warning:      #b7791f;
    --c-danger:       #c0392b;
    --c-surface:      #ffffff;
    --c-bg:           #f0f4f8;
    --c-bg-alt:       #e8edf3;
    --c-border:       #cbd5e0;
    --c-border-dk:    #a0aec0;
    --c-text:         #1a202c;
    --c-text-muted:   #4a5568;
    --c-text-faint:   #a0aec0;

    --header-h:       64px;
    --tabnav-h:       52px;
    --footer-h:       60px;

    --radius-sm:      4px;
    --radius:         6px;
    --radius-lg:      10px;

    --shadow-sm:      0 1px 3px rgba(0,0,0,.08);
    --shadow:         0 2px 8px rgba(0,0,0,.10);
    --shadow-md:      0 4px 16px rgba(0,0,0,.12);

    --transition:     0.18s ease;
}

/* ----------------------------------------------------------------
   RESET
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100vh;
}

h1, h2, h3, h4 { line-height: 1.3; }
a { color: var(--c-primary-lt); }
button { font-family: inherit; cursor: pointer; }

/* ----------------------------------------------------------------
   APP HEADER
   ---------------------------------------------------------------- */
.app-header {
    background: var(--c-primary);
    color: #fff;
    height: var(--header-h);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-badge {
    background: var(--c-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-transform: uppercase;
}

.header-content h1 {
    font-size: 18px;
    font-weight: 600;
    color: #e8edf3;
    white-space: nowrap;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.autosave-indicator {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    font-style: italic;
    transition: opacity var(--transition);
}

.autosave-indicator.saving {
    color: #7dd3fc;
}

/* ── FutureSky brand icon — app header (dark navy bg → use Dark png) ── */
.brand-icon {
    height: 36px;
    width: auto;
    opacity: 0.82;
    flex-shrink: 0;
    display: block;
}

/* ----------------------------------------------------------------
   TAB NAVIGATION
   ---------------------------------------------------------------- */
.tab-nav {
    background: var(--c-surface);
    border-bottom: 2px solid var(--c-border);
    display: flex;
    overflow-x: auto;
    position: sticky;
    top: var(--header-h);
    z-index: 190;
    box-shadow: var(--shadow-sm);
    scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    height: var(--tabnav-h);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--c-text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    position: relative;
    top: 2px;
}

.tab-btn:hover {
    color: var(--c-primary);
    background: var(--c-bg);
}

.tab-btn.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: 700;
}

.tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--c-bg);
    border: 1.5px solid var(--c-border-dk);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.tab-btn.active .tab-num {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

.tab-label {
    letter-spacing: .1px;
}

/* ----------------------------------------------------------------
   MAIN CONTENT
   ---------------------------------------------------------------- */
.main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px calc(var(--footer-h) + 28px);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ----------------------------------------------------------------
   SECTION HEADER
   ---------------------------------------------------------------- */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2.5px solid var(--c-primary);
}

.section-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-primary);
    flex: 1;
}

.label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.label-row label {
    font-weight: 600;
    font-size: 14px;
    color: var(--c-text);
    cursor: auto;
    flex: 1;
}

/* ----------------------------------------------------------------
   INFO BUTTONS & POPOVERS
   ---------------------------------------------------------------- */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--c-primary-lt);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    transition: background var(--transition), transform var(--transition);
    line-height: 1;
}

.info-btn:hover { background: var(--c-primary); transform: scale(1.1); }

.info-btn.sm {
    width: 18px;
    height: 18px;
    font-size: 10px;
}

.popover {
    background: #fefce8;
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: #44403c;
    display: block;
}

.popover[hidden] { display: none; }

/* ----------------------------------------------------------------
   FORM ELEMENTS
   ---------------------------------------------------------------- */
.form-grid {
    display: grid;
    gap: 16px 24px;
}

.form-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid .full-span { grid-column: 1 / -1; }
.form-grid .span-2    { grid-column: span 2; }

.form-stack { display: flex; flex-direction: column; gap: 20px; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
    letter-spacing: .1px;
}

.form-group input,
.form-group textarea,
.form-group select {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary-lt);
    box-shadow: 0 0 0 3px rgba(37,99,168,.15);
}

.form-group input.field-error {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(192,57,43,.15);
}

/* ── Split date / time pair ─────────────────────────────────────── */
.date-time-pair {
    display: flex;
    gap: 6px;
}
/* The date picker stretches to fill available space */
.date-time-pair .dt-date {
    flex: 1 1 auto;
    min-width: 0;
}
/* The time box has a fixed width that fits HH:MM comfortably */
.date-time-pair .dt-time {
    flex: 0 0 80px;
    width: 80px;
    text-align: center;
}

/* "Now" quick-fill button inside date-time-pair */
.date-time-pair .btn-ghost.btn-sm {
    flex: 0 0 auto;
    align-self: stretch;
    white-space: nowrap;
}

.form-group textarea { resize: vertical; min-height: 90px; }

.req { color: var(--c-danger); margin-left: 2px; }

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition),
                opacity var(--transition);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-primary {
    background: var(--c-primary);
    color: #fff;
}
.btn-primary:hover { background: var(--c-primary-dk); }

.btn-secondary {
    background: var(--c-bg-alt);
    color: var(--c-text-muted);
    border: 1.5px solid var(--c-border);
}
.btn-secondary:hover { background: var(--c-border); color: var(--c-text); }

/* Sectional chart viewer button — blue-tinted to distinguish from generic secondary */
.btn-chart {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1.5px solid #bfdbfe;
    font-size: 13px;
}
.btn-chart:hover {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

.btn-ghost {
    background: transparent;
    color: var(--c-text-muted);
    border: 1.5px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-bg-alt); }

/* Per-section clear button — sits in .section-header alongside the ? button */
.btn-clear-section {
    background: transparent;
    color: var(--c-warning);
    border: 1.5px solid var(--c-warning);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--radius);
    opacity: 0.72;
    transition: background var(--transition), color var(--transition),
                opacity var(--transition), box-shadow var(--transition);
}
.btn-clear-section:hover {
    background: var(--c-warning);
    color: #fff;
    opacity: 1;
    box-shadow: 0 2px 6px rgba(183,121,31,.28);
}

.btn-danger-outline {
    background: transparent;
    color: #fee2e2;
    border: 1.5px solid rgba(255,255,255,.3);
    font-size: 13px;
    padding: 6px 14px;
}
.btn-danger-outline:hover {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

.btn-add {
    background: var(--c-success);
    color: #fff;
    font-size: 13px;
    padding: 7px 16px;
}
.btn-add:hover { background: #155724; }

.btn-export {
    background: var(--c-surface);
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
    font-size: 13px;
    padding: 8px 16px;
}
.btn-export:hover {
    background: var(--c-primary);
    color: #fff;
}

/* ----------------------------------------------------------------
   MAP UPLOAD
   ---------------------------------------------------------------- */
.upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.img-storage-warning {
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 6px;
    font-size: 12.5px;
    color: #713f12;
    line-height: 1.5;
}

.upload-slot-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text-muted);
    margin-bottom: 10px;
}

.upload-box {
    border: 2px dashed var(--c-border-dk);
    border-radius: var(--radius-lg);
    background: var(--c-bg);
    position: relative;
    overflow: hidden;
    min-height: 200px;
    transition: border-color var(--transition), background var(--transition);
    cursor: pointer;
}

.upload-box:hover,
.upload-box.drag-over {
    border-color: var(--c-primary-lt);
    background: #ebf2fb;
}

.file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 8px;
    pointer-events: none;
}

.upload-icon { font-size: 40px; }

.upload-placeholder p {
    color: var(--c-text-muted);
    font-size: 14px;
}

.upload-hint {
    font-size: 12px !important;
    color: var(--c-text-faint) !important;
}

.image-preview-box {
    position: relative;
    display: block;
}

.image-preview-box img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: #fff;
    display: block;
}

.remove-img-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(192,57,43,.92);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 5;
    transition: background var(--transition);
}
.remove-img-btn:hover { background: var(--c-danger); }

/* Caption / label input group that sits below each upload slot */
.upload-caption-group {
    margin-top: 10px;
}

/* Flight Zone Images and Description cards are both .fc-group siblings;
   spacing is handled by the standard fc-group margin-bottom: 20px rule. */

/* ----------------------------------------------------------------
   DATA TABLES
   ---------------------------------------------------------------- */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.row-counter {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
}

.table-scroll-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--c-border);
    box-shadow: var(--shadow-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.data-table thead th {
    background: var(--c-primary);
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.data-table tbody tr:nth-child(even) { background: #f8fafd; }

.data-table tbody td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table input[type="text"],
.data-table input[type="datetime-local"] {
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    background: transparent;
    transition: border-color var(--transition), background var(--transition);
    color: var(--c-text);
}

.data-table input:focus {
    outline: none;
    border-color: var(--c-primary-lt);
    background: #fff;
}

.data-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--c-primary);
    display: block;
    margin: 0 auto;
}

.btn-del-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: var(--c-danger);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    transition: background var(--transition);
    cursor: pointer;
}
.btn-del-row:hover { background: #fde8e8; }

.resources-tbl th:nth-child(3) { min-width: 160px; }
.resources-tbl th:nth-child(4) { min-width: 100px; }

.ics205a-tbl th:nth-child(1) { min-width: 210px; }  /* Incident Assigned Position */
.ics205a-tbl th:nth-child(2) { min-width: 170px; }  /* Name */
.ics205a-tbl th:nth-child(3) { min-width: 280px; }  /* Method of Contact */

.ics205-tbl th:nth-child(1)  { min-width: 78px;  }  /* Zone/Grp */
.ics205-tbl th:nth-child(2)  { min-width: 54px;  }  /* Ch # */
.ics205-tbl th:nth-child(3)  { min-width: 118px; }  /* Function/Type */
.ics205-tbl th:nth-child(4)  { min-width: 118px; }  /* Channel Name */
.ics205-tbl th:nth-child(5)  { min-width: 118px; }  /* Assignment */
.ics205-tbl th:nth-child(6)  { min-width: 88px;  }  /* Rx Freq */
.ics205-tbl th:nth-child(7)  { min-width: 94px;  }  /* Rx Tone/NAC */
.ics205-tbl th:nth-child(8)  { min-width: 88px;  }  /* Tx Freq */
.ics205-tbl th:nth-child(9)  { min-width: 94px;  }  /* Tx Tone/NAC */
.ics205-tbl th:nth-child(10) { min-width: 148px; }  /* Remarks */

/* ----------------------------------------------------------------
   ORGANIZATION
   ---------------------------------------------------------------- */
.org-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.org-card {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.org-card-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--c-primary);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-border);
}

.org-card .form-group { margin-bottom: 12px; }
.org-card .form-group:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   FOOTER NAVIGATION
   ---------------------------------------------------------------- */
.tab-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-h);
    background: var(--c-surface);
    border-top: 2px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 180;
    box-shadow: 0 -2px 10px rgba(0,0,0,.07);
}

.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.progress-dots {
    display: flex;
    gap: 6px;
}

.prog-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-border-dk);
    transition: background var(--transition), transform var(--transition);
}

.prog-dot.active {
    background: var(--c-primary);
    transform: scale(1.3);
}

.progress-label {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 500;
}

/* ── FutureSky copyright — app footer ── */
.footer-copyright {
    font-size: 9.5px;
    color: var(--c-text-faint);
    letter-spacing: .15px;
    white-space: nowrap;
    margin-top: 1px;
    font-style: italic;
}

/* ----------------------------------------------------------------
   PREVIEW & EXPORT TOOLBAR
   ---------------------------------------------------------------- */
.export-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 2.5px solid var(--c-primary);
}

.export-bar h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-primary);
}

.export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.export-hint {
    font-size: 11px;
    color: var(--c-text-faint);
    margin-top: 10px;
    text-align: right;
    line-height: 1.5;
}

#preview-wrap {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.preview-empty {
    padding: 80px 40px;
    text-align: center;
    color: var(--c-text-muted);
}

.preview-empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.preview-empty p { font-size: 15px; margin-bottom: 6px; }

.preview-empty-sub { font-size: 13px; color: var(--c-text-faint); }

/* ----------------------------------------------------------------
   ICS 201 DOCUMENT — OUTPUT STYLES
   ---------------------------------------------------------------- */
.ics-doc {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 10.5pt;
    color: #000;
    background: #fff;
    padding: 18px 22px 22px;
    max-width: 8.5in;
    margin: 0 auto;
}

/* -- Header ---------------------------------------------------- */
.ics-title-bar {
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: stretch;
    border: 2px solid #000;
    border-bottom: none;
}

.ics-title-form-id {
    background: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 20pt;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
    border-right: 2px solid #000;
}

.ics-title-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    text-align: center;
}

.ics-title-main {
    font-size: 13pt;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
}

.ics-title-sub {
    font-size: 9pt;
    color: rgba(255,255,255,.75);
    margin-top: 2px;
}

.ics-title-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 8.5pt;
    color: rgba(255,255,255,.7);
    text-align: right;
    white-space: nowrap;
    border-left: 2px solid rgba(255,255,255,.2);
}

/* Brand icon inside ICS document title bar (dark navy bg → use Dark png) */
.ics-brand-icon {
    height: 34px;
    width: auto;
    opacity: 0.88;
    display: block;
}

/* Text block below the icon in the title-right cell */
.ics-title-dist {
    font-size: 8pt;
    color: rgba(255,255,255,.65);
    text-align: right;
    line-height: 1.4;
}

/* -- Info row -------------------------------------------------- */
.ics-info-row {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.6fr;
    border: 2px solid #000;
    border-top: none;
    border-bottom: none;
}

.ics-info-cell {
    padding: 6px 10px;
    border-right: 1.5px solid #000;
}

.ics-info-cell:last-child { border-right: none; }

/* Dividing line when a second info row sits directly below the first */
.ics-info-row + .ics-info-row { border-top: 1.5px solid #000; }

/* Full-width cell used by single-cell rows (e.g. Requesting Agency) */
.ics-info-cell--full { grid-column: 1 / -1; border-right: none; }

/* -- Section --------------------------------------------------- */
.ics-section {
    border: 2px solid #000;
    border-top: none;
}

.ics-sec-hdr {
    background: var(--c-primary);
    color: #fff;
    padding: 5px 10px;
    font-size: 9.5pt;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ics-sec-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    font-size: 9pt;
    flex-shrink: 0;
}

.ics-sec-body {
    padding: 10px 12px;
    min-height: 36px;
}

.ics-sec-body p {
    white-space: pre-wrap;
    line-height: 1.65;
    font-size: 10.5pt;
}

/* -- Field labels in document ---------------------------------- */
.ics-lbl {
    display: block;
    font-size: 7.5pt;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #444;
    margin-bottom: 2px;
}

.ics-val {
    font-size: 11pt;
    font-weight: 700;
    color: #000;
    min-height: 18px;
}

/* -- Map ------------------------------------------------------- */
.ics-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ics-map-grid.single { grid-template-columns: 1fr; max-width: 60%; margin: 0 auto; }

.ics-map-item { text-align: center; }

.ics-map-item img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border: 1px solid #ccc;
    display: block;
    margin: 0 auto;
}

.ics-map-caption {
    font-size: 8.5pt;
    color: #555;
    font-style: italic;
    margin-top: 5px;
}

.ics-no-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: #bbb;
    font-style: italic;
    font-size: 9.5pt;
    border: 1.5px dashed #ddd;
    border-radius: 4px;
}

/* -- Actions table --------------------------------------------- */
.ics-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}

.ics-tbl thead th {
    background: #2c4f76;
    color: #fff;
    padding: 6px 10px;
    text-align: left;
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.ics-tbl tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid #dde3ea;
    vertical-align: top;
    font-size: 10pt;
}

.ics-tbl tbody tr:last-child td { border-bottom: none; }
.ics-tbl tbody tr:nth-child(even) { background: #f6f9fc; }

.ics-tbl .td-time {
    width: 14%;
    white-space: nowrap;
    font-weight: 600;
    font-size: 9.5pt;
    color: #1a3a5c;
}

/* td-time sets dark color for data cells; keep header cells white */
.ics-tbl thead th.td-time { color: #fff; }

/* -- Organization ---------------------------------------------- */
.ics-org-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ics-org-col {
    /* Horizontal padding removed from the column so alternating row
       backgrounds can span edge-to-edge within each column. */
    padding: 10px 0;
}

.ics-org-col:first-child { border-right: 1px solid #ccc; }

.ics-org-col h4 {
    font-size: 8pt;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #333;
    margin-bottom: 8px;
    padding: 0 14px 5px;       /* horizontal padding moved here from .ics-org-col */
    border-bottom: 1px solid #ddd;
}

.ics-org-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 14px;         /* vertical rhythm + same 14px horizontal as h4 */
    font-size: 10pt;
}

/* Alternating row colours — matches the #f6f9fc shade used in
   .ics-tbl and .data-table even rows throughout the document */
.ics-org-rows .ics-org-row:nth-child(odd)  { background: #ffffff; }
.ics-org-rows .ics-org-row:nth-child(even) { background: #f6f9fc; }

.ics-org-role {
    font-size: 8.5pt;
    font-weight: 700;
    color: #3a3a3a;
    min-width: 150px;
    flex-shrink: 0;
}

.ics-org-name { color: #000; font-weight: 500; }
/* .ics-org-empty retained for any legacy renders, but no longer shown */
.ics-org-empty { color: #aaa; font-style: italic; font-size: 9pt; }

/* -- Resources table ------------------------------------------- */
.ics-res-tbl { font-size: 9.5pt; }

.ics-res-tbl thead th { font-size: 8pt; }

.ics-res-tbl tbody td { padding: 5px 8px; font-size: 9.5pt; }

/* -- ICS 205 — Radio Communications Plan (10 columns, compact) - */
.ics-205-tbl { font-size: 8pt; }

.ics-205-tbl thead th { font-size: 7pt; padding: 5px 6px; }

.ics-205-tbl tbody td { padding: 4px 6px; font-size: 8pt; }

/* -- ICS 205A — Communications List (3 columns) ---------------- */
.ics-205a-tbl { font-size: 9.5pt; }

.ics-205a-tbl thead th { font-size: 8pt; }

.ics-205a-tbl tbody td { padding: 5px 8px; font-size: 9.5pt; }

.ics-arrived-y { color: #1a7a38; font-weight: 800; }
.ics-arrived-n { color: #aaa; font-size: 9pt; }

/* -- Pilot acknowledgment & approval block --------------------- */
.ics-pre-footer {
    margin-top: 8px;
}

.ics-pilot-ack {
    border: 2px solid #000;
}

.ics-pilot-ack-hdr {
    background: #1a3a5c;
    color: #fff;
    padding: 5px 10px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 9.5pt;
    letter-spacing: .03em;
}

.ics-pilot-ack-body {
    padding: 9px 12px;
}

.ics-pilot-ack-body p {
    font-size: 9pt;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    color: #222;
}

/* -- Approval row (Approved By / Date) ------------------------- */
.ics-approval-row {
    display: flex;
    border: 2px solid #000;
    border-top: none;
}

.ics-approval-row .ics-info-cell {
    min-height: 42px;
}

.ics-approval-row .ics-info-cell:first-child { flex: 2; }
.ics-approval-row .ics-info-cell:last-child  { flex: 1; }

/* -- Document footer (Prepared By / Incident Name) ------------- */
.ics-doc-footer {
    border: 2px solid #000;
    border-top: none;
    display: flex;
}

.ics-doc-footer .ics-info-cell {
    padding: 7px 10px;
    min-height: 42px;
}

.ics-doc-footer .ics-info-cell:first-child { flex: 2; }
.ics-doc-footer .ics-info-cell:last-child  { flex: 1; }

.ics-doc-watermark {
    border: 2px solid #000;
    border-top: none;
    padding: 4px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ics-doc-watermark span {
    font-size: 7.5pt;
    color: #777;
    letter-spacing: .3px;
}

/* ----------------------------------------------------------------
   TOAST NOTIFICATIONS
   ---------------------------------------------------------------- */
#toast-container {
    position: fixed;
    bottom: calc(var(--footer-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 500;
    pointer-events: none;
}

.toast {
    padding: 11px 22px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: var(--shadow-md);
    animation: toastIn .25s ease forwards;
    pointer-events: auto;
    white-space: nowrap;
}

.toast.toast-success  { background: #1e7e34; }
.toast.toast-error    { background: #c0392b; }
.toast.toast-warning  { background: #b7791f; }
.toast.toast-info     { background: var(--c-primary); }
.toast.toast-fade-out { animation: toastOut .3s ease forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}

/* ── Easter egg modal ─────────────────────────────────────────── */
.wade-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: wadeIn .25s ease forwards;
}

.wade-overlay[hidden] { display: none; }

.wade-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px 36px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    max-width: 340px;
    width: 90%;
    animation: wadeCardIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
}

.wade-wave {
    font-size: 52px;
    margin-bottom: 16px;
    animation: wadeWave 1s ease-in-out 0.3s 2;
    display: inline-block;
    transform-origin: 70% 80%;
}

.wade-msg {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-primary);
    margin: 0 0 28px;
    line-height: 1.3;
}

.wade-close { min-width: 120px; font-size: 15px; padding: 10px 24px; }

@keyframes wadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wadeCardIn {
    from { opacity: 0; transform: scale(.8) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes wadeWave {
    0%,100% { transform: rotate(0deg); }
    25%      { transform: rotate(20deg); }
    75%      { transform: rotate(-10deg); }
}

/* ── Hidden data-file panel (Ctrl+Shift+R) ─────────────────────── */
.datafile-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 10px;
    padding: 16px 20px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    min-width: 220px;
    animation: dfIn .18s ease forwards;
}
.datafile-panel[hidden] { display: none; }
.datafile-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(96, 165, 250, 0.7);
    margin-bottom: 12px;
}
.datafile-btns {
    display: flex;
    gap: 8px;
}
.datafile-btn {
    flex: 1;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    border: none;
    transition: background .15s;
}
.datafile-btn-export {
    background: #1d4ed8;
    color: #fff;
}
.datafile-btn-export:hover { background: #1e40af; }
.datafile-btn-import {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.15);
}
.datafile-btn-import:hover { background: rgba(255,255,255,0.14); }
.datafile-hint {
    font-size: 9.5px;
    color: rgba(148,163,184,0.6);
    margin-top: 10px;
    text-align: center;
    letter-spacing: .04em;
}
@keyframes dfIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ----------------------------------------------------------------
   PRINT STYLES
   ---------------------------------------------------------------- */
@media print {
    .no-print,
    .app-header,
    .tab-nav,
    .tab-footer,
    #tab-0, #tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6,
    .export-bar,
    #toast-container {
        display: none !important;
    }

    #tab-7 { display: block !important; }

    body { background: #fff; font-size: 10pt; }

    .main-content {
        padding: 0;
        max-width: none;
    }

    #preview-wrap {
        box-shadow: none;
        border-radius: 0;
    }

    .ics-doc { padding: 0; max-width: none; }

    .ics-section { page-break-inside: avoid; }

    /* Section 3 (Airspace Assessment) is the longest section;
       break before it so it starts on a fresh page.
       Sections 1–2 are Mission + Flight Zone which fit naturally on page 1.
       nth-child positions: title-bar(1) + sections(2-8) + footer(9)  */
    .ics-section:nth-child(4) { page-break-before: always; }   /* Section 3: Airspace */
    .ics-section:nth-child(7) { page-break-before: always; }   /* Section 6: Organization */
}

/* ================================================================
   RESPONSIVE — Mobile-First Adaptive Layout
   ================================================================
   Breakpoint scale (desktop-first overrides, narrowest last wins):
     ≥ 1440px  large desktop    — generous padding
       1024px  small desktop    — no changes needed
        900px  tablet landscape — 2-col form grids
        768px  tablet portrait  — reduced padding + height vars
        700px  large mobile     — full layout restructure
        600px  mobile           — single-column, header/nav compact
        480px  small mobile     — aggressive padding cuts
        380px  tiny mobile      — minimum viable layout

   Touch targets ≥ 44 px (WCAG 2.5.5) are enforced at ≤ 900 px.
   CSS custom properties override propagate to all dependent
   calc() values (sticky positions, padding-bottom) automatically.
   ================================================================ */

/* ── 1. CSS custom property overrides per viewport ──────────────
   --header-h, --tabnav-h, --footer-h drive every sticky offset
   and spacing calc() in the layout. Override here once.        */
@media (max-width: 768px) {
    :root {
        --header-h:  54px;
        --tabnav-h:  46px;
        --footer-h:  56px;
    }
}
@media (max-width: 480px) {
    :root {
        --header-h:  48px;
        --tabnav-h:  44px;
        --footer-h:  52px;
    }
}

/* ── 2. App header ──────────────────────────────────────────────
   Scale brand text, badge, and FutureSky icon; hide badge on
   tiny screens; shrink icon proportionally.                   */
@media (max-width: 768px) {
    .header-content  { padding: 0 16px; gap: 10px; }
    .header-brand    { gap: 10px; }
    .header-content h1 { font-size: 15px; }
    .header-badge    { font-size: 11px; padding: 3px 9px; }
    .brand-icon      { height: 28px; }
}
@media (max-width: 480px) {
    .header-content  { padding: 0 12px; }
    .header-content h1 { font-size: 13px; }
    /* Badge removed — not enough horizontal room at 320 px */
    .header-badge    { display: none; }
    .autosave-indicator { font-size: 11px; }
    .btn-danger-outline { font-size: 12px; padding: 5px 10px; }
    .brand-icon      { height: 24px; }
    /* Footer copyright — hide on very small screens (too cramped) */
    .footer-copyright { display: none; }
}

/* ── 3. Tab navigation ──────────────────────────────────────────
   Tab bar scrolls horizontally (overflow-x:auto + no scrollbar)
   so we just reduce padding to minimise scroll distance.
   Labels hidden ≤ 768 px (tablet + phone); numbers alone are
   sufficient at those sizes and prevent bar overflow.          */
@media (max-width: 768px) {
    .tab-btn   { padding: 0 14px; font-size: 12px; gap: 6px; }
    .tab-num   { width: 20px; height: 20px; font-size: 10px; }
    .tab-label { display: none; }           /* numbers-only at tablet + mobile */
}
@media (max-width: 600px) {
    .tab-btn   { padding: 0 12px; }
}
@media (max-width: 380px) {
    .tab-btn   { padding: 0 9px; }
    .tab-num   { width: 18px; height: 18px; }
}

/* ── 4. Main content padding ────────────────────────────────────
   Proportionally reduce horizontal and vertical breathing room;
   bottom padding tracks --footer-h so nothing hides under the
   fixed footer bar.                                           */
@media (max-width: 900px) {
    .main-content { padding: 22px 18px calc(var(--footer-h) + 22px); }
}
@media (max-width: 600px) {
    .main-content { padding: 16px 14px calc(var(--footer-h) + 16px); }
}
@media (max-width: 480px) {
    .main-content { padding: 12px 10px calc(var(--footer-h) + 12px); }
}

/* ── 5. Section headers ─────────────────────────────────────────
   Allow header row to wrap so the clear button doesn't clip.  */
@media (max-width: 768px) {
    .section-header       { flex-wrap: wrap; gap: 8px; }
    .section-header h2    { font-size: 17px; }
}
@media (max-width: 480px) {
    .section-header h2    { font-size: 15px; }
    .section-intro        { font-size: 12px; }
}

/* ── 6. Form grids — column collapsing ──────────────────────────
   3-col → 2-col at 900 px → 1-col at 600 px.
   span-2 is meaningless in a 1-col grid so collapse it to full
   width. restrict-area-cell hard-codes grid-column:1/3 which
   breaks a 1-col grid — override to 1/-1 (safe in any width). */
@media (max-width: 900px) {
    .form-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .form-grid.cols-3  { grid-template-columns: 1fr; }
    .form-grid         { gap: 12px 16px; }
    /* span-2 → full width on single-column grid */
    .form-grid .span-2 { grid-column: 1 / -1; }
    /* Fix: grid-column:1/3 is invalid in a 1-col grid */
    .restrict-area-cell {
        grid-column: 1 / -1;
        grid-row: span 1;
    }
}

/* ── 7. Touch targets — 44 px minimum (WCAG 2.5.5) ─────────────
   All interactive elements gain min-height:44px and slightly
   more padding so they're comfortably tappable at ≤ 900 px.  */
@media (max-width: 900px) {
    /* Form inputs */
    .form-group input,
    .form-group select { min-height: 44px; padding: 10px 12px; }
    /* Buttons — all variants */
    .btn, .btn-add, .btn-export, .btn-chart { min-height: 44px; }
    .btn-sm  { min-height: 44px; }
    /* Checkboxes */
    .checkbox-label input[type="checkbox"],
    .data-table input[type="checkbox"],
    .disclaimer-ack-lbl input[type="checkbox"] { width: 22px; height: 22px; }
    /* Delete-row buttons — larger tap zone */
    .btn-del-row { width: 36px; height: 36px; font-size: 18px; }
    /* Info buttons — slightly larger */
    .info-btn { width: 28px; height: 28px; }
}

/* ── 8. fc-group / org-card / disclaimer box padding ───────────
   Proportionally reduce internal card padding on small screens.*/
@media (max-width: 768px) {
    .fc-group        { padding: 16px 16px 14px; }
    .org-card        { padding: 16px; }
    .disclaimer-box  { padding: 12px 14px 10px; }
    .popover         { padding: 11px 14px; }
}
@media (max-width: 480px) {
    .fc-group        { padding: 12px 12px 10px; }
    .org-card        { padding: 12px; }
    .disclaimer-box  { padding: 10px 12px 8px; }
    .disclaimer-title { font-size: 11px; }
    .disclaimer-text  { font-size: 11px; }
    .disclaimer-ack-lbl { font-size: 11px; }
    .popover         { padding: 10px 12px; font-size: 12px; }
    .auth-checkboxes { gap: 10px 14px; }
}

/* ── 9. fc-group-header / org-card-header stacking ─────────────
   At mobile widths the title + actions row can overflow; stack
   them vertically so the clear/auto-fill buttons stay visible. */
@media (max-width: 600px) {
    .fc-group-header,
    .org-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .fc-header-actions { flex-wrap: wrap; }
}

/* ── 10. Operational reference bar ─────────────────────────────
   Wrap ref-bar items into a 2-up grid on small screens, then
   full-width stack on very small screens.                      */
@media (max-width: 600px) {
    .op-ref-item { flex: 1 1 calc(50% - 2px); border-bottom: 1px solid var(--c-border); }
    .op-ref-context { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--c-border); }
}
@media (max-width: 380px) {
    .op-ref-item { flex: 1 1 100%; border-right: none; }
}

/* ── 11. Layout grids — uploads, org, ICS document output ───────
   All multi-column grids collapse to single column.           */
@media (max-width: 700px) {
    /* Form layout */
    .upload-grid                  { grid-template-columns: 1fr; }
    .org-grid                     { grid-template-columns: 1fr; }
    .org-card-full                { grid-column: 1 / -1; }
    .team-staff-grid              { grid-template-columns: 1fr; }

    /* ICS preview — org section */
    .ics-org-cols                 { grid-template-columns: 1fr; }
    .ics-org-col:first-child      { border-right: none; border-bottom: 1px solid #ccc; }

    /* ICS preview — header info rows */
    .ics-info-row                 { grid-template-columns: 1fr; }
    .ics-info-cell                { border-right: none; border-bottom: 1.5px solid #000; }
    .ics-info-cell:last-child     { border-bottom: none; }

    /* ICS preview — footer and approval block */
    .ics-doc-footer,
    .ics-approval-row             { flex-direction: column; }

    /* ICS preview — map grid */
    .ics-map-grid                 { grid-template-columns: 1fr; }
    .ics-map-grid.single          { max-width: 100%; }

    /* ICS preview — flight conditions grid */
    .ics-fc-grid                  { grid-template-columns: 1fr; }
    .ics-fc-cell.span-2,
    .ics-fc-cell.span-3           { grid-column: span 1; }

    /* Title-right: hide text label, keep brand icon */
    .ics-title-dist               { display: none; }
    .ics-title-right              { padding: 6px 8px; border-left: none; }

    /* Additional resources */
    .attached-resources-grid      { flex-direction: column; gap: 8px; }
    .ics-attached-item            { width: 100%; }
    .resource-other-row           { flex-direction: column; align-items: flex-start; }
    .resource-other-row input[type="text"] { width: 100%; }

    /* Airport selector header — stack label above refresh button */
    .fc-airport-selector-header   { flex-direction: column; gap: 8px; }
}

/* ── 12. Export / Preview bar ───────────────────────────────────
   Stack heading + actions vertically; on very small screens
   stretch each action button to full width.                   */
@media (max-width: 700px) {
    .export-bar     { flex-direction: column; align-items: flex-start; }
    .export-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .export-actions           { width: 100%; }
    /* Each action button takes equal share of the full row */
    .export-actions .btn      { flex: 1 1 auto; min-width: 0; justify-content: center; }
    .export-hint              { text-align: left; font-size: 10px; }
    .preview-empty            { padding: 40px 16px; }
    .preview-empty-icon       { font-size: 36px; }
    .preview-empty p          { font-size: 13px; }
}

/* ── 13. Footer navigation (Prev / dots / Next) ─────────────────
   Reduce padding and dot sizes; hide the step label on tiny
   screens — the dots alone provide sufficient progress cue.   */
@media (max-width: 768px) {
    .tab-footer     { padding: 0 16px; }
    .progress-label { font-size: 11px; }
}
@media (max-width: 480px) {
    .tab-footer     { padding: 0 10px; }
    .progress-dots  { gap: 4px; }
    .prog-dot       { width: 6px; height: 6px; }
    /* Step label hidden — dots are enough */
    .progress-label { display: none; }
    #btn-prev, #btn-next { font-size: 13px; padding: 8px 12px; min-height: 44px; }
}

/* ── 14. Toast notifications — prevent viewport overflow ────────
   Toasts use white-space:nowrap by default which can cause a
   horizontal scroll on narrow viewports. Wrap at mobile.      */
@media (max-width: 600px) {
    .toast {
        white-space: normal;
        max-width: calc(100vw - 32px);
        text-align: center;
        font-size: 13px;
        padding: 10px 16px;
    }
}

/* ── 15. Large desktop — extra breathing room ───────────────────
   Above 1440 px restore generous padding without going beyond
   the 1280 px max-width content constraint.                   */
@media (min-width: 1440px) {
    .main-content { padding: 36px 32px calc(var(--footer-h) + 36px); }
}

/* ----------------------------------------------------------------
   TEAM STAFF — FORM (TAB 5)
   ---------------------------------------------------------------- */
.org-card-full {
    grid-column: 1 / -1;
}

.team-staff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}

.team-staff-col .form-group { margin-bottom: 12px; }
.team-staff-col .form-group:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   PRINT-ONLY BLANK WRITE LINES  (sections 3–6)
   ---------------------------------------------------------------- */
.print-write-lines {
    display: none;          /* hidden on screen */
}

/* ----------------------------------------------------------------
   PRINT-ONLY BLANK TABLE ROWS  (section 7)
   ---------------------------------------------------------------- */
.print-blank-row {
    display: none;          /* hidden on screen */
}

/* ----------------------------------------------------------------
   RESOURCE BLANK ROWS — always visible (10-row fixed table)
   ---------------------------------------------------------------- */
.res-blank-row td {
    height: 26px;
    border-bottom: 1px solid #dde3ea;
    background: transparent;
}
.ics-res-tbl tbody tr:nth-child(even).res-blank-row { background: #f6f9fc; }

/* ----------------------------------------------------------------
   STRIPED EXTRA BLANK ROWS — always visible fill lines
   Used in Planned Objectives and Actions & Tactics tables.
   Alternate: .doc-stripe-row (white) / .doc-stripe-row--alt (#f6f9fc)
   ---------------------------------------------------------------- */
.doc-stripe-row td,
.doc-stripe-row--alt td {
    height: 26px;
    border-bottom: 1px solid #dde3ea;
}
.doc-stripe-row     { background: #fff; }
.doc-stripe-row--alt { background: #f6f9fc; }

/* ----------------------------------------------------------------
   TEAM STAFF — DOCUMENT OUTPUT
   ---------------------------------------------------------------- */
.ics-org-team-hdr {
    background: #2c4f76;
    color: #fff;
    padding: 4px 14px;
    font-size: 8.5pt;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-top: 1px solid rgba(255,255,255,.2);
}

/* ----------------------------------------------------------------
   PRINT ADDITIONS
   ---------------------------------------------------------------- */
@media print {
    /* Blank handwriting lines — show only in print */
    .print-write-lines {
        display: block;
        margin-top: 10px;
        padding: 0 2px;
    }

    .print-write-line {
        border-bottom: 1px solid #999;
        height: 26px;
        margin-bottom: 0;
    }

    /* Blank action rows — show only in print */
    .print-blank-row {
        display: table-row;
    }

    .print-blank-row td {
        height: 26px;
        border-bottom: 1px solid #dde3ea;
    }
}

/* ----------------------------------------------------------------
   SECTION INTRO — always-visible guidance text below section headers
   ---------------------------------------------------------------- */
.section-intro {
    font-size: 13px;
    line-height: 1.65;
    color: var(--c-text-muted);
    margin: -2px 0 20px;
}

/* ----------------------------------------------------------------
   OPERATIONAL REFERENCE BAR — read-only summary at top of tab-2
   ---------------------------------------------------------------- */
.op-ref-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--c-bg-alt);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.op-ref-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 140px;
    padding: 7px 14px;
    border-right: 1px solid var(--c-border);
    min-width: 0;
}
.op-ref-item:last-child { border-right: none; }

.op-ref-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-muted);
    margin-bottom: 2px;
}

.op-ref-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Context chip at the leading edge of the Operational Reference Bar
   so users know the values are pulled from Tab 1 fields. */
.op-ref-context {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-faint);
    border-right: 1px solid var(--c-border);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Spacing when Flight Location & Timing card follows the Incident Info
   form-grid on tab-0 — creates clear visual delineation between the
   two logical groups without introducing new design patterns.         */
#tab-0 .form-grid + .fc-group {
    margin-top: 32px;
}

/* ----------------------------------------------------------------
   PILOT DISCLAIMER BOX — Tab 1 form entry only (no-print)
   ---------------------------------------------------------------- */
.disclaimer-box {
    background: #fffbeb;
    border: 2px solid #d97706;
    border-radius: var(--radius);
    padding: 14px 18px 12px;
    margin-bottom: 22px;
}

.disclaimer-box.error {
    border-color: var(--c-danger);
    background: #fff5f5;
}

.disclaimer-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #92400e;
    margin-bottom: 10px;
}

.disclaimer-box.error .disclaimer-title {
    color: var(--c-danger);
}

.disclaimer-text {
    font-size: 12px;
    line-height: 1.6;
    color: #78350f;
}

.disclaimer-text p {
    margin: 0 0 8px;
}

.disclaimer-text p:last-child {
    margin-bottom: 0;
}

.disclaimer-ack-row {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #fcd34d;
}

.disclaimer-box.error .disclaimer-ack-row {
    border-top-color: #fca5a5;
}

.disclaimer-ack-lbl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #78350f;
    cursor: pointer;
    line-height: 1.5;
}

.disclaimer-ack-lbl input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #d97706;
    cursor: pointer;
}

.disclaimer-box.error .disclaimer-ack-lbl {
    color: var(--c-danger);
}

/* Gate: dims and blocks interaction with the form body until the
   disclaimer is acknowledged. Transition keeps the feel smooth.  */
.disclaimer-gated {
    opacity: 0.38;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.22s ease;
}

.disclaimer-gated * {
    pointer-events: none !important;
}

/* ----------------------------------------------------------------
   FLIGHT CONDITIONS — FORM (TAB 2)
   ---------------------------------------------------------------- */
.fc-group {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-top: 3px solid var(--c-primary-lt);
    border-radius: var(--radius-lg);
    padding: 20px 22px 18px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.fc-group:last-child { margin-bottom: 0; }

/* fc-group-header: flex row used in groups that have an auto-fill button */
.fc-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-border);
}

/* When .fc-group-title is inside .fc-group-header, remove its own border */
.fc-group-header .fc-group-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Wrapper for multiple action buttons (e.g. auto-fill + clear) in fc-group-header */
.fc-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Org-card header: mirrors fc-group-header for org-card sub-sections */
.org-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-border);
}
.org-card-header .org-card-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.fc-group-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--c-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-border);
}

/* Small button variant used for auto-fill and lookup buttons */
.btn-sm {
    font-size: 12px;
    padding: 6px 13px;
}

/* Hint text under form inputs */
.fc-field-hint {
    display: block;
    font-size: 11px;
    color: var(--c-text-faint);
    margin-top: 4px;
    line-height: 1.4;
}


/* ── Row 1: Flight Location + City + State on one line ────── */
.fc-location-fields-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;  /* inputs align to baseline */
}

.fc-location-fields-row .form-group {
    min-width: 0;
}

/* Location gets the most space (~50%) */
.fc-location-fields-row .fc-location-cell {
    flex: 3;
}

/* City gets medium space (~30%) */
.fc-location-fields-row .fc-city-cell {
    flex: 2;
}

/* State is narrow (~20%, capped) */
.fc-location-fields-row .fc-state-cell {
    flex: 1;
    max-width: 140px;
}

/* ── Row 2: Lookup button below the three fields ──────────── */
.fc-lookup-btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.fc-lookup-btn-row .fc-field-hint {
    margin-top: 0;  /* override block spacing — hint sits inline beside button */
}

/* ── Facility lookup button row (between Nearby Airports and Closest Tower) ── */
.fc-facility-lookup-row {
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Table column sub-header hint (e.g. "MM/DD/YY") ────────── */
.col-hint {
    font-size: 10px;
    font-weight: 400;
    color: var(--c-text-faint);
    display: block;
    letter-spacing: .2px;
}

/* ── Location suggestion picker ─────────────────────────── */
.fc-location-suggestions {
    margin-top: 10px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.fc-suggestions-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-muted);
    letter-spacing: .1px;
}

.fc-suggestions-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    font-size: 15px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    line-height: 1.6;
    transition: background var(--transition), color var(--transition);
}

.fc-suggestions-close:hover {
    background: var(--c-bg-alt);
    color: var(--c-text);
}

.fc-suggestion-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition);
}

.fc-suggestion-item:last-child {
    border-bottom: none;
}

.fc-suggestion-item:hover,
.fc-suggestion-item:focus {
    background: var(--c-bg);
    outline: none;
}

.fc-suggestion-item:focus {
    box-shadow: inset 0 0 0 2px var(--c-primary-lt);
}

.fc-suggestion-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.35;
    overflow-wrap: break-word;
}

.fc-suggestion-addr {
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.3;
}

.fc-suggestion-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    width: 100%;
    text-align: center;
    background: var(--c-bg);
    border: none;
    border-top: 1.5px solid var(--c-border);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary-lt);
    transition: background var(--transition), color var(--transition);
}

.fc-suggestion-more:hover {
    background: var(--c-bg-alt);
    color: var(--c-primary);
}

.fc-suggestion-more:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Stack on very narrow screens */
@media (max-width: 600px) {
    .fc-location-fields-row {
        flex-direction: column;
        gap: 10px;
    }
    .fc-location-fields-row .fc-state-cell {
        max-width: none;
    }
    .fc-lookup-btn-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ----------------------------------------------------------------
   AIRPORT PROXIMITY SELECTOR — Nearest Facility Details
   ---------------------------------------------------------------- */
.fc-airport-selector {
    grid-column: 1 / -1;
    background: var(--c-bg);
    border: 1.5px solid var(--c-border);
    border-left: 4px solid var(--c-primary-lt);
    border-radius: var(--radius);
    padding: 14px 16px 12px;
    margin-bottom: 4px;
}

.fc-airport-selector-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.fc-airport-selector-label-block label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
    letter-spacing: .1px;
    margin-bottom: 3px;
    cursor: default;
}

.fc-airport-select-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fc-airport-select {
    flex: 1;
    border: 1.5px solid var(--c-border-dk);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    cursor: pointer;
    appearance: auto;
    min-width: 0;
}

.fc-airport-select:focus {
    outline: none;
    border-color: var(--c-primary-lt);
    box-shadow: 0 0 0 3px rgba(37, 99, 168, .15);
}

.fc-airport-select:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--c-bg-alt);
}

.fc-airport-select option {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
}

.fc-airport-select option:first-child {
    font-family: inherit;
    font-style: italic;
    color: var(--c-text-faint);
}

/* <optgroup> separators — ● Within 25 miles / ○ Beyond 25 miles.
   Native rendering varies by OS/browser; these declarations improve
   legibility where CSS on optgroup is supported (Chromium, Firefox). */
.fc-airport-select optgroup {
    font-family: inherit;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-primary);
    background: var(--c-bg-alt);
}

/* Within-radius group — blue tint on supporting browsers */
.fc-airport-select optgroup:first-of-type {
    color: var(--c-primary);
}

/* Beyond-radius group — muted amber tint on supporting browsers */
.fc-airport-select optgroup:last-of-type {
    color: var(--c-warning);
}

.fc-airport-status {
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.fc-airport-status.status-ok   { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.fc-airport-status.status-warn { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.fc-airport-status.status-err  { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
/* status-info — blue, used when address geocoding is in progress or has resolved */
.fc-airport-status.status-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.fc-airport-status[hidden]     { display: none; }

/* ---- Frequency lookup status badge (below CTAF/UNICOM/Phone fields) ---- */
.fc-freq-lookup-status {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.fc-freq-lookup-status.status-loading { background: #f0f9ff; color: #0369a1; border: 1px solid #7dd3fc; }
.fc-freq-lookup-status.status-ok      { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.fc-freq-lookup-status.status-warn    { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.fc-freq-lookup-status.status-error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.fc-freq-lookup-status[hidden]        { display: none; }

/* ----------------------------------------------------------------
   TOWERED AIRPORT OPTIONS — in the nearby-airports <select>
   The ★ prefix in option text provides universal cross-browser
   distinction; these rules add colour/weight where supported.
   ---------------------------------------------------------------- */
option.ap-opt-towered {
    font-weight: 700;
    color: #1d4ed8;   /* blue — matches sectional chart convention for towered airports */
}


/* Restrictions textarea + checkboxes — spans 2 columns × 2 rows in the 3-col grid */
.restrict-area-cell {
    grid-column: 1 / 3;
    grid-row: span 2;
}

/* Auth checkbox row inside the restrictions cell — space between checkboxes and textarea */
.restrict-area-cell .auth-checkboxes {
    margin-bottom: 8px;
}

.auth-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--c-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* Mission Type — "Other" description field sits inline inside auth-checkboxes */
.mission-other-input {
    flex: 1 1 160px;
    max-width: 280px;
    height: 28px;
    padding: 0 8px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    align-self: center;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.mission-other-input:focus {
    outline: none;
    border-color: var(--c-primary-lt);
    box-shadow: 0 0 0 2px rgba(37, 99, 168, .15);
}
.mission-other-input::placeholder { color: var(--c-text-faint); }

/* ----------------------------------------------------------------
   FLIGHT CONDITIONS — DOCUMENT OUTPUT
   ---------------------------------------------------------------- */
.ics-fc-subhdr {
    background: #e8edf3;
    color: var(--c-primary);
    padding: 4px 12px;
    font-size: 8pt;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-top: 1px solid #cbd5e0;
    border-bottom: 1px solid #cbd5e0;
}

.ics-fc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #dde3ea;
}

.ics-fc-cell {
    padding: 6px 12px;
    border-right: 1px solid #dde3ea;
}

.ics-fc-cell:last-child { border-right: none; }

.ics-fc-cell.span-2 {
    grid-column: span 2;
}

.ics-fc-cell.span-3 {
    grid-column: span 3;
}

.ics-fc-grid:last-child { border-bottom: none; }

/* ----------------------------------------------------------------
   REVIEW DOCUMENT — TEXT BLOCKS & CELL SIZING
   ---------------------------------------------------------------- */

/* Large text content block: Mission Summary, briefings, long-form fields */
.rev-text-block {
    min-height: 54px;
    white-space: pre-wrap;
    line-height: 1.7;
    font-weight: 400;
    font-size: 10.5pt;
}
.rev-text-block p { margin: 0; }

/* Extra bottom padding for text-block cells to leave write-in space on print */
.rev-text-cell { padding-bottom: 18px !important; }

/* ----------------------------------------------------------------
   ADDITIONAL RESOURCES ATTACHED — form (Tab 4)
   ---------------------------------------------------------------- */

/* Briefing tab fc-groups (Mission Summary, Planned Objectives, Health,
   Safety, Additional Resources) are direct siblings; spacing is provided
   by the standard fc-group margin-bottom: 20px rule. */

/* Checkbox grid for the five standard resource items */
.attached-resources-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin-bottom: 16px;
}

/* Three "Other" rows: checkbox label + free-text input side by side */
.resource-other-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.resource-other-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Fixed-width label keeps all three "Other:" labels visually aligned */
.resource-other-lbl {
    flex-shrink: 0;
    min-width: 90px;
}

/* The free-text input fills remaining row width */
.resource-other-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

/* Emergency Location checkbox row — sits below the Other rows with a separator */
.emerg-attach-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.emerg-copies-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}

.emerg-copies-input {
    width: 58px;
    padding: 3px 6px;
    border: 1.5px solid var(--c-border);
    border-radius: calc(var(--radius) - 2px);
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    color: var(--c-text);
    background: var(--c-bg);
}
.emerg-copies-input:focus {
    outline: none;
    border-color: #ea580c;
    box-shadow: 0 0 0 2px rgba(234,88,12,0.18);
}

/* Satellite / Street Map checkbox row (sits above the zoom slider) */
.map-sat-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
}

/* Map zoom slider (Satellite / Street Map detail level) */
.map-zoom-row {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--c-alt, #f1f5f9);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.map-zoom-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}

.map-zoom-slider-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.map-zoom-end {
    font-size: 11px;
    color: var(--c-label, #6b7280);
    white-space: nowrap;
}

.map-zoom-slider {
    width: 130px;
    accent-color: #1a3a5c;
    cursor: pointer;
}

.map-zoom-badge {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a3a5c;
    background: #dde8f5;
    border-radius: 6px;
    padding: 2px 7px;
}

.map-zoom-desc {
    font-size: 12px;
    color: var(--c-label, #6b7280);
}

/* Editable preview section shown when Emergency Location Page is checked */
.emerg-preview-section {
    margin-top: 12px;
    padding: 14px 16px 16px;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: var(--radius);
}

.emerg-preview-intro {
    margin: 0 0 12px;
    font-size: 13px;
    color: #c2410c;
    font-weight: 600;
    line-height: 1.5;
}

.emerg-preview-field {
    margin-bottom: 10px;
}
.emerg-preview-field:last-child {
    margin-bottom: 0;
}

.emerg-preview-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #9a3412;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.emerg-preview-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1.5px solid #fdba74;
    border-radius: calc(var(--radius) - 2px);
    background: #fffbf7;
    font-size: 14px;
    font-family: inherit;
    color: var(--c-text);
    resize: vertical;
    line-height: 1.45;
}
.emerg-preview-field textarea:focus {
    outline: none;
    border-color: #ea580c;
    box-shadow: 0 0 0 2px rgba(234,88,12,0.18);
}

/* Inline confirmation hint shown when UAS Kneeboard Page is ticked */
.kneeboard-hint {
    margin-top: 8px;
    padding: 9px 14px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: var(--radius);
    font-size: 13px;
    color: #1d4ed8;
    font-weight: 600;
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   ADDITIONAL RESOURCES — document preview / PDF output (§11)
   ---------------------------------------------------------------- */

/* Checklist grid — two-column, fits naturally in doc width */
.ics-attached-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 12px 6px;
    gap: 2px 0;
}

.ics-attached-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 50%;
    font-size: 10pt;
    padding: 4px 0;
}

/* Small square checkbox indicator */
.ics-check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 2px solid #6b7280;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
    line-height: 1;
    color: transparent;
}

.ics-check.ics-check--on {
    background: #1a3a5c;
    border-color: #1a3a5c;
    color: #fff;
}

/* ----------------------------------------------------------------
   EMERGENCY LOCATION PAGE — standalone PDF/print page
   ---------------------------------------------------------------- */

/* Outer wrapper: letter-size canvas (8.5 × 11 in at 96 dpi)
   Padding = 0.5 in on all sides (48 px at 96 dpi) so the sign
   fills the full printable area. */
.emerg-page-wrap {
    width: 816px;
    min-height: 1056px;
    background: #fff;
    padding: 48px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Red alert header band */
.emerg-page-header {
    background: #b91c1c;
    color: #fff;
    text-align: center;
    padding: 28px 40px 22px;
    border-radius: 10px 10px 0 0;
}

/* "EMERGENCY LOCATION" — significantly enlarged */
.emerg-page-header h1 {
    font-size: 60px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 8px;
    line-height: 1.05;
}

/* Incident name sub-heading — enlarged, no "UAS Flight Operations" prefix */
.emerg-page-header p {
    font-size: 22px;
    margin: 0;
    opacity: .9;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Content panel below the red header */
.emerg-page-body {
    border: 3px solid #b91c1c;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 28px 36px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Giant 911 call-out box */
.emerg-page-dial911 {
    font-size: 56px;
    font-weight: 900;
    color: #b91c1c;
    text-align: center;
    border: 4px solid #b91c1c;
    border-radius: 10px;
    padding: 18px 28px;
    margin-bottom: 30px;
    letter-spacing: .04em;
    background: #fff5f5;
    line-height: 1.1;
}

/* Each data field block */
.emerg-page-field {
    margin-bottom: 28px;
}

.emerg-page-field:last-child {
    margin-bottom: 0;
    flex: 1;
}

/* Field sub-headings — enlarged */
.emerg-page-lbl {
    display: block;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6b7280;
    margin-bottom: 8px;
}

/* Field values — enlarged for clear readability when posted */
.emerg-page-val {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    border-bottom: 2px solid #d1d5db;
    padding-bottom: 8px;
    min-height: 58px;
    line-height: 1.25;
}

.emerg-page-val--empty {
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
}

/* Footer line */
.emerg-page-footer {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
    letter-spacing: .03em;
}

/* All ≤ 700 px responsive rules are consolidated in the
   RESPONSIVE section above. No duplicate blocks here. */