/*
    TNT | Follow the Leader — Stylesheet
    Created: 2026-08-07
    Companion: followTheLeader.html
*/

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --ftl-forest:  #1a5c2e;
    --ftl-forest2: #145024;
    --ftl-gold:    #c9972b;
    --ftl-amber:   #F5A623;
    --ftl-cream:   #f7f5f0;
    --ftl-dark:    #0d1a0f;
    --ftl-muted:   #5a5040;
}

/* ── Log / guide bar ────────────────────────────────────────── */
.ftl-log-bar {
    background: var(--ftl-forest);
    padding: 0.4rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.84rem;
    border-bottom: 2px solid var(--ftl-gold);
}
.ftl-log-bar a {
    color: rgba(255,255,255,0.92);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s;
}
.ftl-log-bar a:hover { color: var(--ftl-amber); }
.ftl-log-sep { color: rgba(255,255,255,0.35); }

/* ── Hero ────────────────────────────────────────────────────── */
#ftlHero { padding: 4rem 1rem 3rem; }

.ftl-eyebrow {
    display: inline-block;
    font-family: 'Boogaloo', cursive;
    font-size: 0.88rem;
    letter-spacing: 1.5px;
    color: var(--ftl-amber);
    margin-bottom: 0.6rem;
}
.ftl-hero-title {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(2.4rem, 6vw, 4rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.6rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.ftl-hero-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: rgba(255,255,255,0.82);
    max-width: 560px;
    line-height: 1.65;
}
.ftl-hero-icon {
    font-size: 6.5rem;
    color: var(--ftl-amber);
    opacity: 0.82;
    text-shadow: 0 0 40px rgba(245,166,35,0.45);
}

/* ── Shell ───────────────────────────────────────────────────── */
.ftl-shell {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ── Section label ───────────────────────────────────────────── */
.ftl-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ftl-forest);
    margin-bottom: 0.35rem;
    display: block;
}

/* ── Intro panel ─────────────────────────────────────────────── */
.ftl-intro-panel {
    background: #fff;
    border-left: 5px solid var(--ftl-forest);
    border-radius: 0 8px 8px 0;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    color: #333;
    line-height: 1.7;
}
.ftl-intro-panel a { color: var(--ftl-forest); font-weight: 700; }

/* ── Print-only header ───────────────────────────────────────── */
.ftl-print-header {
    display: none;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--ftl-forest);
    margin-bottom: 1rem;
}
.ftl-print-app-name {
    font-family: 'Boogaloo', cursive;
    font-size: 1.5rem;
    color: var(--ftl-forest);
    font-weight: 700;
}
.ftl-print-tagline { font-size: 0.78rem; color: #666; }

/* ── Info card ───────────────────────────────────────────────── */
.ftl-info-card {
    background: var(--ftl-cream);
    border: 1px solid rgba(26,92,46,0.2);
    border-top: 4px solid var(--ftl-forest);
    border-radius: 0 0 8px 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.ftl-info-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
}
.ftl-field-wrap { display: flex; flex-direction: column; flex: 1 1 180px; }
.ftl-field-date { flex: 0 1 160px; }
.ftl-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ftl-forest);
    margin-bottom: 0.25rem;
}
.ftl-meta-input {
    border: none;
    border-bottom: 2px solid #ccc;
    background: transparent;
    padding: 0.3rem 0.2rem;
    font-size: 0.95rem;
    color: #1a1812;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
    width: 100%;
}
.ftl-meta-input:focus { border-bottom-color: var(--ftl-forest); }

/* ── Quest card ──────────────────────────────────────────────── */
.ftl-quest-card {
    background: #fff;
    border: 1px solid rgba(201,151,43,0.3);
    border-left: 5px solid var(--ftl-gold);
    border-radius: 0 8px 8px 0;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1rem;
}
.ftl-quest-input {
    border: none;
    border-bottom: 2px solid #ddd;
    background: transparent;
    padding: 0.28rem 0.2rem;
    font-size: 0.95rem;
    color: #1a1812;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
    width: 100%;
    margin-bottom: 0.75rem;
}
.ftl-quest-input:last-child { margin-bottom: 0; }
.ftl-quest-input:focus { border-bottom-color: var(--ftl-gold); }
.ftl-quest-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ftl-quest-field { flex: 1 1 220px; }

/* ── Actions bar ─────────────────────────────────────────────── */
.ftl-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}
.ftl-btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s;
    white-space: nowrap;
}
.ftl-btn:hover { filter: brightness(1.1); }
.ftl-btn-add   { background: var(--ftl-forest); color: #fff; }
.ftl-btn-save  { background: var(--ftl-gold);   color: #fff; }
.ftl-btn-print { background: #2c5f2e;            color: #fff; }
.ftl-btn-clear { background: #c0392b;            color: #fff; }
.ftl-status-badge {
    font-size: 0.8rem;
    color: var(--ftl-forest);
    font-weight: 600;
    margin-left: 0.25rem;
}

/* ── Breadcrumbs table ───────────────────────────────────────── */
.ftl-table-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(26,92,46,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ftl-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ftl-table thead tr { background: var(--ftl-forest); color: #fff; }
.ftl-table th {
    padding: 0.55rem 0.85rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ftl-table th.th-no  { width: 3.5rem; text-align: center; }
.ftl-table th.th-loc { width: 36%; }
.ftl-table td {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid rgba(26,92,46,0.1);
    vertical-align: middle;
}
.ftl-table td.td-no {
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--ftl-forest);
}
.ftl-table tbody tr:nth-child(even) { background: rgba(26,92,46,0.04); }
.ftl-table td input[type="text"] {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid #e0e0e0;
    background: transparent;
    padding: 0.25rem 0.1rem;
    font-size: 0.88rem;
    color: #1a1812;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}
.ftl-table td input[type="text"]:focus { border-bottom-color: var(--ftl-forest); }

/* ── Discovery section ───────────────────────────────────────── */
.ftl-discovery-card {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ftl-discovery-field {
    background: #fff;
    border: 1px solid rgba(26,92,46,0.2);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
}
.ftl-discovery-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ftl-forest);
    margin-bottom: 0.4rem;
}
.ftl-treasure { border-left: 4px solid var(--ftl-gold); }
.ftl-surprise { border-left: 4px solid #e07b39; }
.ftl-discovery-field textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    background: transparent;
    padding: 0.3rem 0.2rem;
    font-size: 0.9rem;
    color: #1a1812;
    outline: none;
    font-family: inherit;
    resize: vertical;
    min-height: 4rem;
    transition: border-color 0.15s;
    line-height: 1.6;
}
.ftl-discovery-field textarea:focus { border-bottom-color: var(--ftl-forest); }

/* ── Trail tip ───────────────────────────────────────────────── */
.ftl-tip {
    background: rgba(26,92,46,0.07);
    border-left: 4px solid var(--ftl-forest);
    border-radius: 0 6px 6px 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #333;
    line-height: 1.6;
    margin-top: 0.5rem;
}
.ftl-tip a { color: var(--ftl-forest); font-weight: 700; }

/* screen-mode: hide beforeprint substitution divs until the print engine needs them */
.ftl-print-value { display: none; }

/* ── Print CSS ───────────────────────────────────────────────── */
@media print {
    #mainNav, footer, .ftl-log-bar, #ftlHero,
    .ftl-intro-panel, .ftl-actions-bar, #ftlClearConfirm,
    .ftl-tip { display: none !important; }

    .ftl-print-header { display: flex !important; }

    body { background: #fff !important; font-size: 10.5pt; }
    .ftl-shell { padding: 0; max-width: 100%; }

    .ftl-meta-input,
    .ftl-quest-input,
    .ftl-table td input[type="text"],
    .ftl-discovery-field textarea {
        border: none !important;
        border-bottom: 1px solid #999 !important;
        background: transparent !important;
        /* allow verbose text and long URLs to wrap rather than clip */
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: pre-wrap !important;
        height: auto !important;
    }

    /* table cells must also allow wrapping or the input fix has nowhere to go */
    .ftl-table td {
        overflow: visible !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* beforeprint/afterprint substitution: div replaces input so content wraps properly */
    .ftl-print-hidden { display: none !important; }
    .ftl-print-value {
        display: block;
        border-bottom: 1px solid #999;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        font-family: inherit;
        font-size: 0.9rem;
        color: #1a1812;
        padding: 0.25rem 0.2rem;
        min-height: 1.2em;
    }

    .ftl-table thead tr { background: #1a5c2e !important; }
    * { print-color-adjust: exact !important; }
    .ftl-table tbody tr:nth-child(even) { background: #eef4ef !important; }
    .ftl-table-wrap { border: 1px solid #aaa !important; }
    .ftl-discovery-card, .ftl-quest-card { break-inside: avoid; }

    @page { size: letter; margin: 0.75in; }
}