/* ════════════════════════════════════════════════════════════════════════
   FIELD DESIGN SYSTEM
   Centralized "Field" visual standard for the control-panel tab pages
   (Home, Detections, Library, Map Requests). Build new tabs from these
   tokens + classes instead of hand-coding cream headers, close buttons,
   section labels, and status colors.

   HOW TO BUILD A NEW FIELD TAB
   1. In switchView() (js/plan.js) add the view id to FIELD_TABS — that hides
      the shared dark header and applies the cream `control-panel--field` surface.
   2. Markup pattern:
        <div class="field-header">
          <div class="field-header-text">                 (optional wrapper)
            <div class="field-header-sub">subtitle</div>   (optional)
            <div class="field-header-title">Title</div>
          </div>
          <div class="field-header-actions">               (optional)
            <button class="field-btn-primary">＋ New</button>
            <button class="field-close" onclick="document.getElementById('closePanel').click()">✕</button>
          </div>
        </div>
        <div class="field-section">
          <span class="field-section-label">Section</span>
          <span class="field-section-rule"></span>
        </div>
        <div class="field-card field-tint--done"> … </div>
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Surfaces & text */
    --field-surface:  #FBFAF5;            /* cream panel surface */
    --field-card:     #FFFFFF;            /* card surface */
    --field-text:     #2C2C28;            /* primary text */
    --field-muted:    #9A9A90;            /* muted text */
    --field-label:    #A0A096;            /* faint section labels */
    --field-hairline: rgba(0, 0, 0, .06);
    --field-border:   rgba(0, 0, 0, .08);

    /* Shape */
    --field-radius-card: 13px;
    --field-radius-pill: 9px;

    /* Accents */
    --field-accent:   #3E6E3A;            /* green text/border accent */

    /* Status palette — tint cards/pills by state (done / pending / fail) */
    --field-done-text:    #2E6A40;
    --field-done-bg:      #F4F9F2;
    --field-done-border:  rgba(62, 124, 78, .14);
    --field-done-dot:     #3E7C4E;

    --field-pending-text:   #9A742A;
    --field-pending-bg:     #FDF9EF;
    --field-pending-border: rgba(201, 154, 51, .14);
    --field-pending-dot:    #C99A33;

    --field-fail-text:    #A6453D;
    --field-fail-bg:      #FBF4F2;
    --field-fail-border:  rgba(181, 82, 74, .14);
    --field-fail-dot:     #B5524A;
}

/* ── Panel surface ──────────────────────────────────────────────────────── */
/* Toggled by switchView() for every Field tab. */
.control-panel--field .panel-content { background: var(--field-surface); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--font-primary);
}
.field-header-text { min-width: 0; }
.field-header-sub {
    font-size: 12px;
    color: var(--field-muted);
    line-height: 1.3;
}
.field-header-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--field-text);
    line-height: 1.2;
}
.field-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Circular close button */
.field-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--field-hairline);
    background: rgba(0, 0, 0, .035);
    color: var(--field-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.field-close:hover { background: rgba(0, 0, 0, .07); color: #6E6E64; }

/* ── Primary gradient button (e.g. "＋ New") ────────────────────────────── */
.field-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-primary);
    color: #fff;
    background: var(--primary, #337B30);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.field-btn-primary:hover { background: #2b6829; }

/* ── Section label + hairline ──────────────────────────────────────────── */
.field-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 10px;
}
/* A section directly under the header doesn't need its own top gap. */
.field-header + .field-section { margin-top: 0; }
.field-section-label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--field-label);
    font-family: var(--font-primary);
}
.field-section-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--field-hairline);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.field-card {
    background: var(--field-card);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius-card);
}