/* ==========================================================================
   SEERIEQUERIES // FIELD NOTES
   ==========================================================================
   Field Notes introduction, local webmaster editor, search/filter directory,
   note feed, status badges, pagination, empty state, and responsiveness.
   ========================================================================== */

/* ==========================================================================
   34. FIELD NOTES
   ========================================================================== */


/* ==========================================================================
   PAGE INTRODUCTION
   ========================================================================== */

.field-notes-page .field-notes-welcome-layout {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 35px;
}


.field-notes-page .field-notes-welcome-main {
    flex: 1;
    min-width: 0;
}


.field-notes-page .field-notes-subtitle {
    max-width: 620px;

    margin: 8px 0 5px 0;

    color: var(--text-muted);

    font-size: 0.82rem;
    font-style: italic;

    line-height: 1.55;
}



/* ==================== QUICK DATA ==================== */

.field-notes-page .field-notes-quick-data {
    flex: 0 0 250px;

    padding: 10px 13px;

    background-color: rgba(6, 4, 18, 0.42);

    border: 1px dashed var(--border-cosmic);
    border-radius: 5px;

    box-sizing: border-box;

    font-family: monospace;
    font-size: 0.6rem;
}


.field-notes-page .field-notes-quick-label {
    display: block;

    margin-bottom: 7px;

    color: var(--cyan-glow);

    font-size: 0.56rem;
    font-weight: bold;

    letter-spacing: 1px;
}


.field-notes-page .field-notes-quick-data div {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-top: 4px;

    color: var(--text-muted);
}


.field-notes-page .field-notes-quick-data strong {
    color: #c8c3dc;
}


.field-notes-page .field-notes-signal {
    color: var(--cyan-glow) !important;

    text-shadow:
        0 0 5px rgba(100, 255, 218, 0.35);
}



/* ==========================================================================
   WEBMASTER EDITOR
   ========================================================================== */

.field-notes-page .field-editor-panel {
    margin-top: 20px;

    padding: 20px;

    background-color: var(--bg-container);

    border: 1px solid var(--border-cosmic);
    border-top: 3px solid var(--accent-glow);
    border-radius: 8px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.35);
}


.field-notes-page .field-editor-header {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}


.field-notes-page .field-editor-kicker {
    color: var(--cyan-glow);

    font-family: monospace;
    font-size: 0.58rem;

    letter-spacing: 1px;
}


.field-notes-page .field-editor-header h2 {
    margin: 4px 0 0 0;

    color: var(--accent-glow);

    font-family: 'Macondo', serif;
}


.field-notes-page .field-webmaster-status {
    padding: 4px 7px;

    color: var(--cyan-glow);

    background-color: rgba(100, 255, 218, 0.04);

    border: 1px solid #24594f;
    border-radius: 3px;

    font-family: monospace;
    font-size: 0.58rem;
}



/* ==========================================================================
   EDITOR FORM
   ========================================================================== */

.field-notes-page #field-note-form {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.field-notes-page #field-note-form label {
    margin-top: 5px;

    color: var(--accent-glow);

    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: bold;
}


.field-notes-page #field-note-form input,
.field-notes-page #field-note-form select,
.field-notes-page #field-note-form textarea {
    width: 100%;

    padding: 8px 10px;

    box-sizing: border-box;

    background-color: #090713;

    border: 1px solid #35304d;
    border-radius: 3px;

    color: #cbc6dc;

    font-family: 'Courier New', monospace;
    font-size: 0.77rem;

    outline: none;
}


.field-notes-page #field-note-form textarea {
    min-height: 180px;

    resize: vertical;
}


.field-notes-page #field-note-form input:focus,
.field-notes-page #field-note-form select:focus,
.field-notes-page #field-note-form textarea:focus {
    background-color: #0c091b;

    border-color: var(--accent-glow);

    box-shadow:
        0 0 8px rgba(189, 154, 255, 0.16);
}


.field-notes-page .field-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


.field-notes-page .field-form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.field-notes-page .field-input-hint {
    color: #706a8c;

    font-family: monospace;
    font-size: 0.56rem;
}



/* ==================== EDITOR ACTIONS ==================== */

.field-notes-page .field-editor-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 8px;
}


.field-notes-page .field-primary-button,
.field-notes-page .field-secondary-button {
    padding: 7px 14px;

    border-radius: 4px;

    font-family: 'Macondo', serif;
    font-size: 0.85rem;

    cursor: pointer;
}


.field-notes-page .field-primary-button {
    background-color: #18132f;

    border: 1px solid var(--accent-glow);

    color: var(--text-primary);
}


.field-notes-page .field-primary-button:hover {
    background-color: #292147;

    color: #ffffff;

    box-shadow:
        0 0 10px rgba(189, 154, 255, 0.24);
}


.field-notes-page .field-secondary-button {
    background-color: transparent;

    border: 1px solid #47405d;

    color: var(--text-muted);
}


.field-notes-page .field-secondary-button:hover {
    color: #ffffff;

    border-color: #70668e;
}



/* ==================== EDITOR RESPONSE ==================== */

.field-notes-page .field-editor-response {
    min-height: 16px;

    margin-top: 5px;

    font-family: monospace;
    font-size: 0.62rem;
}


.field-notes-page .field-response-success {
    color: var(--cyan-glow);
}


.field-notes-page .field-response-error {
    color: #ff9fb2;
}



/* ==========================================================================
   FIELD DIRECTORY
   ========================================================================== */

.field-notes-page .field-directory-panel {
    margin-top: 20px;

    padding: 20px;

    background-color: var(--bg-container);

    border: 1px solid var(--border-cosmic);
    border-top: 3px solid var(--cyan-glow);
    border-radius: 8px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.35);
}


.field-notes-page .field-directory-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;
}


.field-notes-page .field-directory-heading h2 {
    margin: 5px 0 0 0;

    color: var(--accent-glow);

    font-family: 'Macondo', serif;
}


.field-notes-page .field-note-count {
    color: var(--cyan-glow);

    font-family: monospace;
    font-size: 0.62rem;

    letter-spacing: 1px;
}



/* ==========================================================================
   SEARCH + FILTER BAR
   ========================================================================== */

.field-notes-page .field-filter-bar {
    display: grid;

    grid-template-columns:
        minmax(220px, 2fr)
        minmax(140px, 1fr)
        minmax(140px, 1fr);

    gap: 10px;

    margin: 17px 0;
}


.field-notes-page .field-search-wrap,
.field-notes-page .field-filter-wrap {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.field-notes-page .field-filter-bar label {
    color: var(--text-muted);

    font-family: monospace;
    font-size: 0.54rem;

    letter-spacing: 1px;
}


.field-notes-page .field-filter-bar input,
.field-notes-page .field-filter-bar select {
    width: 100%;

    box-sizing: border-box;

    padding: 7px 8px;

    background-color: #090713;

    border: 1px solid #35304d;
    border-radius: 3px;

    color: #bbb7cd;

    font-family: monospace;
    font-size: 0.66rem;

    outline: none;
}


.field-notes-page .field-filter-bar input:focus,
.field-notes-page .field-filter-bar select:focus {
    border-color: var(--accent-glow);
}



/* ==========================================================================
   FIELD NOTE FEED
   ========================================================================== */

.field-notes-page .field-note-feed {
    display: flex;
    flex-direction: column;

    gap: 13px;
}



/* ==========================================================================
   INDIVIDUAL FIELD NOTE
   ========================================================================== */

.field-notes-page .field-note-card {
    padding: 15px;

    background-color: rgba(6, 4, 18, 0.48);

    border: 1px solid var(--border-cosmic);
    border-left: 3px solid var(--accent-glow);
    border-radius: 5px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.field-notes-page .field-note-card:hover {
    border-color: #544779;

    box-shadow:
        0 0 10px rgba(189, 154, 255, 0.07);
}



/* ==================== NOTE META ==================== */

.field-notes-page .field-note-meta {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    color: var(--text-muted);

    font-family: monospace;
    font-size: 0.59rem;
}


.field-notes-page .field-note-sigil {
    margin-right: 6px;

    color: var(--cyan-glow);

    text-shadow:
        0 0 5px rgba(100, 255, 218, 0.35);
}


.field-notes-page .field-note-code {
    display: flex;

    align-items: center;

    gap: 7px;
}



/* ==================== STATUS BADGES ==================== */

.field-notes-page .field-status-badge {
    padding: 2px 5px;

    border-radius: 3px;

    font-size: 0.54rem;
}


.field-notes-page .field-status-published {
    color: var(--cyan-glow);

    border: 1px solid #24594f;
}


.field-notes-page .field-status-draft {
    color: #e3b85c;

    border: 1px solid #6e571f;
}


.field-notes-page .field-status-archived {
    color: #8d87a2;

    border: 1px solid #403b50;
}



/* ==================== NOTE TITLE ==================== */

.field-notes-page .field-note-card h3 {
    margin: 10px 0 7px 0;

    color: var(--accent-glow);

    font-family: 'Macondo', serif;
    font-size: 1.08rem;
}



/* ==================== NOTE BODY ==================== */

.field-notes-page .field-note-body {
    margin-top: 10px;

    color: #b9b5ca;

    font-size: 0.78rem;

    line-height: 1.62;
}



/* ==================== NOTE FOOTER ==================== */

.field-notes-page .field-note-footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-top: 13px;
    padding-top: 8px;

    border-top:
        1px dotted var(--border-cosmic);
}


.field-notes-page .field-note-updated {
    color: #68627e;

    font-family: monospace;
    font-size: 0.54rem;
}



/* ==================== WEBMASTER NOTE CONTROLS ==================== */

.field-notes-page .field-note-controls {
    display: flex;

    gap: 5px;
}


.field-notes-page .field-note-controls button {
    padding: 3px 6px;

    background-color: transparent;

    border: 1px solid #413b57;
    border-radius: 3px;

    color: #918baa;

    font-family: monospace;
    font-size: 0.54rem;

    cursor: pointer;
}


.field-notes-page .field-note-controls button:hover {
    color: var(--cyan-glow);

    border-color: #24594f;
}


.field-notes-page .field-note-controls .field-delete-button:hover {
    color: #ff9fb2;

    border-color: #704652;
}



/* ==========================================================================
   EMPTY NOTEBOOK
   ========================================================================== */

.field-notes-page .field-notes-empty {
    min-height: 220px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    background-color: rgba(6, 4, 18, 0.38);

    border: 1px dashed var(--border-cosmic);
    border-radius: 5px;

    text-align: center;
}


.field-notes-page .field-notes-empty > span {
    color: var(--cyan-glow);

    font-size: 1.6rem;
}


.field-notes-page .field-notes-empty strong {
    color: var(--accent-glow);

    font-family: 'Macondo', serif;
}


.field-notes-page .field-notes-empty p {
    margin: 0;

    color: var(--text-muted);

    font-size: 0.72rem;
}


.field-notes-page .field-notes-empty small {
    color: #68627e;

    font-family: monospace;
    font-size: 0.54rem;
}



/* ==========================================================================
   FIELD NOTE PAGINATION
   ========================================================================== */

.field-notes-page .field-pagination {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 6px;

    margin-top: 16px;

    color: var(--text-muted);

    font-family: monospace;
    font-size: 0.58rem;
}


.field-notes-page .field-pagination button {
    padding: 3px 6px;

    background-color: transparent;

    border: 1px solid transparent;
    border-radius: 3px;

    color: var(--accent-glow);

    font-family: monospace;
    font-size: 0.62rem;

    cursor: pointer;
}


.field-notes-page .field-pagination button:hover,
.field-notes-page .field-pagination .current-field-page {
    color: var(--cyan-glow);

    border-color: var(--border-headspace);

    background-color: rgba(100, 255, 218, 0.05);
}



/* ==========================================================================
   RESPONSIVE SUPPORT
   ========================================================================== */

@media (max-width: 850px) {

    .field-notes-page .field-notes-welcome-layout {
        flex-direction: column;

        align-items: stretch;
    }


    .field-notes-page .field-notes-quick-data {
        width: 100%;

        flex-basis: auto;
    }


    .field-notes-page .field-filter-bar {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .field-notes-page .field-form-row {
        grid-template-columns: 1fr;
    }


    .field-notes-page .field-editor-actions {
        flex-direction: column-reverse;
    }


    .field-notes-page .field-primary-button,
    .field-notes-page .field-secondary-button {
        width: 100%;
    }


    .field-notes-page .field-directory-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .field-notes-page .field-note-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* ==========================================================================
   40. MISCELLANEOUS MISCHIEF // FIELD NOTES
   ==========================================================================
   PAGE IDENTITY:
   "Field Journal."

   Organized observations that still look like they were assembled from
   notes, tabs, labels, penciled categories, and whatever was nearby.

   PALETTE:
   ===> The Buried
   ===> The Valley
   ===> Oath of the Drowned
   ===> muted rust

   This is the most EARTHY page in the Miscellaneous wing.
   ========================================================================== */


/* ==========================================================================
   40.1 FIELD NOTES PALETTE
   ========================================================================== */

.field-notes-page {
    --field-earth: #65442f;
    --field-rust: #a65a38;

    --field-moss: #71864d;
    --field-moss-light: #9bab63;

    --field-slate: #627b87;
    --field-teal: #4f7974;

    --field-paper-dark: #24251f;
    --field-paper-mid: #303129;

    position: relative;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(98, 123, 135, 0.045) 0,
            rgba(98, 123, 135, 0.045) 1px,
            transparent 1px,
            transparent 28px
        ),
        radial-gradient(
            circle,
            rgba(155, 171, 99, 0.065) 1px,
            transparent 1.7px
        );

    background-size:
        auto,
        62px 62px;

    background-position:
        0 0,
        13px 18px;
}


/* ==========================================================================
   40.2 WELCOME / FIELD COVER
   ========================================================================== */

.field-notes-page > .welcome-box {
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(113, 134, 77, 0.09),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            rgba(38, 37, 29, 0.97),
            rgba(20, 27, 25, 0.97)
        );

    border-color:
        rgba(113, 134, 77, 0.34);

    border-left:
        3px solid var(--field-moss);

    box-shadow:
        5px 6px 0 rgba(4, 6, 6, 0.18),
        inset 0 0 22px rgba(79, 121, 116, 0.025);
}


.field-notes-page > .welcome-box h1 {
    color: #b2bd78;

    text-shadow:
        0 0 9px rgba(113, 134, 77, 0.18);
}


.field-notes-page .field-notes-quick-data {
    background:
        #1a211e;

    border-color:
        rgba(79, 121, 116, 0.34);

    box-shadow:
        3px 3px 0 rgba(5, 7, 7, 0.20);
}


.field-notes-page .field-notes-quick-label,
.field-notes-page .field-notes-signal {
    color:
        #80aea4 !important;
}


/* ==========================================================================
   40.3 WEBMASTER EDITOR // WORKBENCH
   ========================================================================== */

.field-notes-page .field-editor-panel {
    position: relative;

    background:
        linear-gradient(
            145deg,
            #24251f,
            #171e1c
        );

    border-color:
        rgba(166, 90, 56, 0.30);

    border-top:
        3px solid var(--field-rust);

    box-shadow:
        5px 6px 0 rgba(5, 6, 6, 0.22),
        inset 0 0 18px rgba(113, 134, 77, 0.025);
}


.field-notes-page .field-editor-panel::before {
    content: "WORKBENCH";

    position: absolute;

    top: -10px;
    right: 16px;

    padding:
        3px 7px;

    color: #d2b19a;

    background:
        #442b22;

    border:
        1px solid rgba(166, 90, 56, 0.36);

    font-family: monospace;
    font-size: 0.50rem;

    letter-spacing: 0.8px;
}


.field-notes-page .field-editor-kicker {
    color: #88a66a;
}


.field-notes-page .field-editor-header h2 {
    color: #c47753;
}


.field-notes-page .field-webmaster-status {
    color: #8fb4ab;

    background-color:
        rgba(79, 121, 116, 0.07);

    border-color:
        rgba(79, 121, 116, 0.40);
}


/* ==========================================================================
   40.4 FORMS / FILTERS
   ========================================================================== */

.field-notes-page #field-note-form label,
.field-notes-page .field-filter-bar label {
    color: #9eb16e;
}


.field-notes-page #field-note-form input,
.field-notes-page #field-note-form select,
.field-notes-page #field-note-form textarea,
.field-notes-page .field-filter-bar input,
.field-notes-page .field-filter-bar select {
    color: #cbc8bc;

    background:
        #151a18;

    border-color:
        rgba(98, 123, 135, 0.28);
}


.field-notes-page #field-note-form input:focus,
.field-notes-page #field-note-form select:focus,
.field-notes-page #field-note-form textarea:focus,
.field-notes-page .field-filter-bar input:focus,
.field-notes-page .field-filter-bar select:focus {
    border-color:
        var(--field-teal);

    box-shadow:
        0 0 8px rgba(79, 121, 116, 0.09);
}


/* ==========================================================================
   40.5 DIRECTORY PANEL
   ========================================================================== */

.field-notes-page .field-directory-panel {
    background:
        linear-gradient(
            145deg,
            rgba(32, 34, 29, 0.94),
            rgba(20, 27, 25, 0.94)
        );

    border-color:
        rgba(113, 134, 77, 0.28);

    box-shadow:
        5px 6px 0 rgba(5, 7, 7, 0.19);
}


.field-notes-page .field-directory-heading h2 {
    color: #a4b76f;
}


.field-notes-page .field-note-count {
    color: #d1845e;

    border-color:
        rgba(166, 90, 56, 0.36);
}


/* ==========================================================================
   40.6 NOTE CARDS // INDEX CARDS
   ========================================================================== */

.field-notes-page .field-note-card {
    position: relative;

    background:
        linear-gradient(
            145deg,
            #2a2a24,
            #202521
        );

    border-color:
        rgba(98, 123, 135, 0.26);

    border-left:
        3px solid var(--field-moss);

    box-shadow:
        4px 4px 0 rgba(4, 6, 6, 0.18);
}


.field-notes-page .field-note-card:nth-child(3n + 2) {
    border-left-color:
        var(--field-rust);
}


.field-notes-page .field-note-card:nth-child(3n + 3) {
    border-left-color:
        var(--field-teal);
}


.field-notes-page .field-note-card:hover {
    transform:
        translateX(2px);

    border-color:
        rgba(155, 171, 99, 0.48);

    box-shadow:
        5px 5px 0 rgba(4, 6, 6, 0.22);
}


.field-notes-page .field-note-sigil {
    color: #c47a56;
}


.field-notes-page .field-note-card h3 {
    color: #c2c99c;
}


/* ==================== STATUS BADGES ==================== */

.field-notes-page .field-status-published {
    color: #a8c18c;

    border-color:
        rgba(113, 134, 77, 0.48);
}


.field-notes-page .field-status-draft {
    color: #d38a63;

    border-color:
        rgba(166, 90, 56, 0.48);
}


.field-notes-page .field-status-archived {
    color: #89949c;

    border-color:
        rgba(98, 123, 135, 0.42);
}