/* ------------------------------------------------------------------
       Shared theme for the Folklore Database: landing page (.fl-landing),
       search page (.fl-searchpage) and record pages (.fl-page), plus the
       site chrome (sidebar, footer, page shell) that every page uses.

       This file is now self-contained for those pages: the "site chrome"
       section below carries the page shell (body flex layout, sidebar,
       footer, containers, mobile breakpoint) that previously came from
       db_style_today.css, so pages using fl-theme no longer need to link
       db_style_today.css. Legacy pages still load db_style_today.css and
       are unaffected; while both files exist, any sidebar/footer change
       must be made in both.

       Component rules further down remain scoped to the .fl-* wrappers.
       ------------------------------------------------------------------ */
    :root{
        --fl-paper:#F5F7F9;
        --fl-card:#FFFFFF;
        --fl-ink:#17232F;
        --fl-ink-2:#3E5060;
        --fl-muted:#6C7B89;
        --fl-line:#DDE4EA;
        --fl-line-soft:#E8EDF1;
        --fl-teal:#0E7A63;
        --fl-teal-dark:#0B6353;
        --fl-ochre:#BE8629;
        --fl-serif:'Spectral',Georgia,'Times New Roman',serif;
        --fl-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
        --fl-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
    }

    /* ==================================================================
       SITE CHROME — page shell, sidebar and footer
       ------------------------------------------------------------------
       Ported from db_style_today.css and re-expressed in the design tokens
       above, so the chrome matches the pages it frames. Class names are
       unchanged, so db_sidebar.php and db_footer.php need no edits beyond
       the collapse controls.

       The collapsed sidebar has two meanings by viewport, handled in the
       two media queries at the end of this block:
         desktop  - a 64px icon rail
         mobile   - off-canvas, slid out of view
       ================================================================== */
    *{margin:0;padding:0;box-sizing:border-box;}

    body{
        display:flex;
        min-height:100vh;
        font-family:var(--fl-sans);
        background:var(--fl-paper);
        color:var(--fl-ink);
        -webkit-font-smoothing:antialiased;
    }

    /* ---------- Sidebar (db_sidebar.php) ---------- */
    .sidebar{
        position:sticky;
        top:0;
        align-self:flex-start;
        width:270px;
        flex:0 0 270px;
        height:100vh;
        overflow-y:auto;
        overflow-x:hidden;          /* the rail must never scroll sideways */
        background:var(--fl-card);
        border-right:1px solid var(--fl-line);
        transition:width .22s ease,flex-basis .22s ease;
    }

    .logo{
        padding:20px;
        font-size:24px;
        font-weight:bold;
        border-bottom:1px solid var(--fl-line);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }
    /* Wordmark: Spectral in teal, no underline — it matches the h1 on every
       page, so the sidebar reads as part of the same design. */
    .logo a,
    .logo a:hover{text-decoration:none;}
    .logo-text{
        font-family:var(--fl-serif);
        font-weight:600;
        letter-spacing:-.01em;
        color:var(--fl-teal);
        white-space:nowrap;
        transition:color .15s;
    }
    .logo a:hover .logo-text{color:var(--fl-teal-dark);}

    /* Collapse control, sitting in the logo row */
    .toggle-btn{
        flex:0 0 auto;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:32px;
        height:32px;
        background:var(--fl-card);
        border:1px solid var(--fl-line);
        border-radius:8px;
        color:var(--fl-ink-2);
        cursor:pointer;
        transition:border-color .13s,color .13s;
    }
    .toggle-btn:hover{border-color:var(--fl-teal);color:var(--fl-teal);}
    .toggle-btn svg{width:16px;height:16px;transition:transform .22s ease;}
    .sidebar.collapsed .toggle-btn svg{transform:rotate(180deg);}

    /* Section labels: the mono eyebrow used throughout the site */
    .menu-section{
        font-family:var(--fl-mono);
        font-size:11px;
        font-weight:500;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:var(--fl-muted);
        margin:24px 0 6px 20px;
        white-space:nowrap;
    }

    .menu-item{position:relative;}
    .menu-link{
        display:flex;
        align-items:center;
        width:100%;
        padding:9px 18px;
        font-family:var(--fl-sans);
        font-size:14px;
        color:var(--fl-ink-2);
        text-align:left;
        text-decoration:none;
        background:none;
        border:none;
        cursor:pointer;
        transition:background-color .13s,color .13s;
    }
    .menu-link:hover{background-color:#F1F5F4;color:var(--fl-ink);text-decoration:none;}
    .menu-link.active{
        color:var(--fl-teal);
        font-weight:500;
        background-color:#EAF4F1;
        box-shadow:inset 2px 0 0 0 var(--fl-teal);
    }

    .menu-icon{
        flex-shrink:0;
        display:flex;
        align-items:center;
        justify-content:center;
        width:20px;
        height:20px;
        margin-right:12px;
        color:#8494A1;
        transition:color .13s;
    }
    .menu-link:hover .menu-icon,
    .menu-link.active .menu-icon{color:var(--fl-teal);}
    .menu-icon svg{width:18px;height:18px;display:block;}

    .menu-text{white-space:nowrap;}

    .expand-icon{
        display:inline-flex;
        align-items:center;
        margin-left:auto;
        color:var(--fl-muted);
        transition:transform .22s ease;
    }
    .expand-icon svg{width:14px;height:14px;}
    .menu-item.expanded .expand-icon{transform:rotate(90deg);}

    .submenu{
        max-height:0;
        overflow:hidden;
        visibility:hidden;          /* keeps closed links out of the tab order */
        background-color:#F7FAF9;
        transition:max-height .25s ease;
    }
    .menu-item.expanded .submenu{max-height:500px;visibility:visible;}
    .submenu .menu-link{padding-left:50px;font-size:13.5px;}

    /* Tooltips: the data-tooltip hints, and the labels shown on the icon rail */
    .menu-link[data-tooltip]::after,
    .sidebar.collapsed .menu-link[data-label]::after{
        content:attr(data-tooltip);
        position:absolute;
        left:100%;
        top:50%;
        transform:translateY(-50%);
        margin-left:8px;
        padding:5px 10px;
        background:var(--fl-ink);
        color:#fff;
        font-family:var(--fl-sans);
        font-size:12.5px;
        border-radius:6px;
        white-space:nowrap;
        opacity:0;
        pointer-events:none;
        transition:opacity .18s ease;
        z-index:9999;
    }
    .sidebar.collapsed .menu-link[data-label]::after{content:attr(data-label);}
    .menu-link[data-tooltip]:hover::after,
    .sidebar.collapsed .menu-link[data-label]:hover::after{opacity:1;}

    /* Account block */
    .menu-account{padding:4px 18px 26px;}
    .side-btn{
        display:block;
        width:100%;
        padding:9px 14px;
        margin-bottom:9px;
        font-family:var(--fl-sans);
        font-size:14px;
        font-weight:500;
        text-align:center;
        text-decoration:none;
        border-radius:9px;
        cursor:pointer;
        transition:background .13s,border-color .13s,color .13s;
    }
    .side-btn-primary{background:var(--fl-teal);border:1px solid var(--fl-teal);color:#fff;}
    .side-btn-primary:hover{background:var(--fl-teal-dark);border-color:var(--fl-teal-dark);color:#fff;text-decoration:none;}
    .side-btn-quiet{background:var(--fl-card);border:1px solid var(--fl-line);color:var(--fl-ink-2);}
    .side-btn-quiet:hover{border-color:var(--fl-teal);color:var(--fl-teal);text-decoration:none;}
    .side-link{
        display:inline-block;
        margin-top:2px;
        font-size:13.5px;
        color:var(--fl-muted);
        text-decoration:none;
    }
    .side-link:hover{color:var(--fl-teal);text-decoration:underline;}

    /* Mobile-only controls, hidden on desktop */
    .fl-sidebar-fab{display:none;}
    .fl-scrim{display:none;}

    /* ---------- Main column ---------- */
    .main-container{flex:1 1 auto;min-width:0;}
    .main-content{padding:40px;}
    .content-section{
        max-width:1200px;
        margin:0 auto;
        text-align:center;
    }

    /* ---------- Footer (db_footer.php) ---------- */
    .footer{
        text-align:center;
        font-size:12.5px;
        line-height:1.5;
        color:var(--fl-muted);
        border-top:1px solid var(--fl-line);
        margin-top:56px;
        padding-top:26px;
        padding-bottom:8px;
    }
    .footer p{margin-bottom:8px;}
    .footer p:last-child{margin-bottom:0;}
    .footer a{color:var(--fl-teal);text-decoration:none;}
    .footer a:hover{text-decoration:underline;}

    /* ---------- Legacy page components ----------
       Carried over from db_style_today.css so older pages that have not been
       rebranded still lay out correctly, restated in the tokens. */
    .header{
        background:var(--fl-card);
        border-bottom:1px solid var(--fl-line);
        padding:16px 24px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }
    .nav-links{display:flex;gap:32px;}
    .nav-links a{
        font-size:14px;font-weight:500;color:var(--fl-ink-2);
        text-decoration:none;padding-bottom:2px;
        border-bottom:2px solid transparent;transition:border-color .2s,color .2s;
    }
    .nav-links a:hover,.nav-links a.active{color:var(--fl-teal);border-bottom-color:var(--fl-teal);}
    .search-bar{
        display:flex;align-items:center;min-width:300px;
        background:#FBFCFD;border:1px solid var(--fl-line);
        border-radius:9px;padding:8px 16px;
    }
    .search-bar input{
        width:100%;margin-left:8px;font-family:var(--fl-sans);font-size:14px;
        border:none;background:none;outline:none;color:var(--fl-ink);
    }
    .section-title{
        font-family:var(--fl-serif);font-weight:600;font-size:32px;
        line-height:1.1;color:var(--fl-ink);margin-bottom:24px;
    }
    .section-description{
        font-size:16px;line-height:1.6;color:var(--fl-ink-2);
        max-width:800px;margin:0 auto 40px;
    }
    .cards-grid{
        display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
        gap:24px;margin-top:40px;
    }
    .card{
        background:var(--fl-card);border:1px solid var(--fl-line);
        border-radius:12px;padding:24px;text-align:left;
        box-shadow:0 1px 2px rgba(23,35,47,.04);
        transition:box-shadow .2s,border-color .13s;
    }
    .card:hover{border-color:var(--fl-line);box-shadow:0 1px 2px rgba(23,35,47,.04),0 10px 30px -18px rgba(23,35,47,.18);}
    .card h3{font-family:var(--fl-serif);font-weight:600;margin-bottom:12px;color:var(--fl-ink);}
    .card p{color:var(--fl-ink-2);line-height:1.55;}
    .large-icon{font-size:150%;}
    .container-custom{overflow-y:auto;height:100vh;}

    /* ---------- Desktop: collapsed is a 64px icon rail ---------- */
    @media (min-width:769px){
        .sidebar.collapsed{width:64px;flex-basis:64px;}
        .sidebar.collapsed .logo{padding:20px 0;justify-content:center;}
        .sidebar.collapsed .logo-text{display:none;}
        .sidebar.collapsed .menu-link{padding-left:0;padding-right:0;justify-content:center;}
        .sidebar.collapsed .menu-icon{margin-right:0;}
        .sidebar.collapsed .menu-text,
        .sidebar.collapsed .menu-section,
        .sidebar.collapsed .expand-icon,
        .sidebar.collapsed .menu-account,
        .sidebar.collapsed .submenu{display:none;}
    }

    /* ---------- Mobile: collapsed is off-canvas ---------- */
    @media (max-width:768px){
        .sidebar{
            position:fixed;
            top:0;left:0;
            z-index:1000;
            width:270px;
            flex-basis:0;
            box-shadow:0 0 40px rgba(23,35,47,.18);
            transition:transform .22s ease;
        }
        .sidebar.collapsed{transform:translateX(-100%);}

        /* Floating control, always reachable */
        .fl-sidebar-fab{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            position:fixed;
            top:12px;left:12px;
            z-index:1100;
            width:42px;height:42px;
            background:var(--fl-card);
            border:1px solid var(--fl-line);
            border-radius:10px;
            color:var(--fl-ink-2);
            cursor:pointer;
            box-shadow:0 2px 10px rgba(23,35,47,.10);
        }
        .fl-sidebar-fab svg{width:20px;height:20px;}
        .sidebar:not(.collapsed) ~ .fl-scrim{
            display:block;
            position:fixed;
            inset:0;
            z-index:999;
            background:rgba(23,35,47,.34);
            border:none;
        }
        .main-content{padding:66px 20px 20px;}
    }
    /* ================== end site chrome ================== */


    /* ------------------------------------------------------------------
       Heading scale (h1-h6). Placed early on purpose: the component rules
       further down (.fl-page-head h1, .fl-summary h3, .fl-table-bar h4 and
       so on) have the same specificity, so they continue to win on source
       order. Scoped to the page wrappers so the sidebar and footer, still
       styled by db_style_today.css, are untouched.
       ------------------------------------------------------------------ */
    .fl-searchpage h1,.fl-page h1,.fl-landing h1,.fl-page-head h1,
    .fl-searchpage h2,.fl-page h2,.fl-landing h2,
    .fl-searchpage h3,.fl-page h3,.fl-landing h3,
    .fl-searchpage h4,.fl-page h4,.fl-landing h4,
    .fl-searchpage h5,.fl-page h5,.fl-landing h5,
    .fl-searchpage h6,.fl-page h6,.fl-landing h6{
        font-family:var(--fl-serif);
        font-weight:600;
        color:var(--fl-ink);
        text-align:left;
    }

    .fl-searchpage h1,.fl-page h1,.fl-landing h1,.fl-page-head h1{
        font-size:40px;line-height:1.05;letter-spacing:-.01em;
        margin:0 0 14px;
        text-align:center;
    }
    .fl-searchpage h2,.fl-page h2,.fl-landing h2{
        font-size:30px;line-height:1.1;letter-spacing:-.01em;
        margin:34px 0 12px;
    }
    .fl-searchpage h3,.fl-page h3,.fl-landing h3{
        font-size:23px;line-height:1.2;letter-spacing:-.005em;
        margin:28px 0 10px;
    }
    .fl-searchpage h4,.fl-page h4,.fl-landing h4{
        font-size:19px;line-height:1.3;
        margin:24px 0 9px;
    }
    .fl-searchpage h5,.fl-page h5,.fl-landing h5{
        font-size:16px;line-height:1.35;
        color:var(--fl-ink-2);
        margin:22px 0 8px;
    }
    .fl-searchpage h6,.fl-page h6,.fl-landing h6{
        font-size:14px;line-height:1.4;letter-spacing:.01em;
        color:var(--fl-ink-2);
        margin:20px 0 7px;
    }

    /* Section headers: h2 plus an ochre tag, as .fl-results-head already does.
       .fl-section-head is used throughout db_get_motif.php but was unstyled. */
    .fl-section-head,.fl-page .fl-section-head{
        display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
        border-top:1px solid var(--fl-line);
        margin:38px 0 16px;
        padding-top:26px;
    }
    .fl-section-head h2{margin:0;font-weight:500;font-size:26px;}
    .fl-section-head .tag{
        font-family:var(--fl-mono);
        font-size:11px;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:var(--fl-ochre);
    }

    @media (max-width:860px){
        .fl-searchpage h2,.fl-page h2,.fl-landing h2{font-size:25px;}
        .fl-searchpage h3,.fl-page h3,.fl-landing h3{font-size:20px;}
        .fl-searchpage h4,.fl-page h4,.fl-landing h4{font-size:17.5px;}
        .fl-section-head h2{font-size:22px;}
    }

    .fl-searchpage{
        text-align:left;
        font-family:var(--fl-sans);
        color:var(--fl-ink);
        max-width:1100px;
        margin:0 auto;
        padding-top:16px;
        -webkit-font-smoothing:antialiased;
    }

    /* Page header */
    .fl-page-head{margin-bottom:26px;}
    .fl-eyebrow{
        font-family:var(--fl-mono);
        font-size:12px;
        letter-spacing:.16em;
        text-transform:uppercase;
        color:var(--fl-teal);
        margin:0 0 12px;
    }
    .fl-page-head h1{
        font-family:var(--fl-serif);
        font-weight:600;
        font-size:40px;
        line-height:1.05;
        letter-spacing:-.01em;
        margin:0;
        color:var(--fl-ink);
    }

    /* Search card */
    .fl-search{
        background:var(--fl-card);
        border:1px solid var(--fl-line);
        border-radius:14px;
        padding:24px 24px 22px;
        box-shadow:0 1px 2px rgba(23,35,47,.04),0 10px 30px -18px rgba(23,35,47,.18);
        margin-bottom:14px;
    }
    .fl-search-row{display:flex;gap:12px;align-items:stretch;}
    .fl-search-input{
        flex:1;
        font-family:var(--fl-sans);
        font-size:17px;
        color:var(--fl-ink);
        padding:15px 17px;
        border:1px solid var(--fl-line);
        border-radius:10px;
        background:#FBFCFD;
        outline:none;
        transition:border-color .15s,box-shadow .15s;
    }
    .fl-search-input::placeholder{color:#9AA8B4;}
    .fl-search-input:focus{
        border-color:var(--fl-teal);
        box-shadow:0 0 0 3px rgba(14,122,99,.14);
        background:#fff;
    }
    .fl-btn-search{
        flex:0 0 auto;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-family:var(--fl-sans);
        font-size:16px;
        font-weight:600;
        color:#fff;
        background:var(--fl-teal);
        border:none;
        border-radius:10px;
        padding:0 26px;
        cursor:pointer;
        text-decoration:none;
        transition:background .15s,transform .05s;
    }
    .fl-btn-search:hover{background:var(--fl-teal-dark);color:#fff;text-decoration:none;}
    .fl-btn-search:active{transform:translateY(1px);}

    .fl-search-hint{
        font-size:14px;
        color:var(--fl-muted);
        margin:13px 2px 0;
        line-height:1.5;
    }
    .fl-search-hint b{color:var(--fl-ink-2);font-weight:500;}
    .fl-search-hint a{color:var(--fl-teal);text-decoration:none;}
    .fl-search-hint a:hover{text-decoration:underline;}

    .fl-toggle-row{display:flex;align-items:center;margin-top:14px;}
    .fl-adv-toggle{
        font-family:var(--fl-sans);
        font-size:14px;
        color:var(--fl-teal);
        background:none;
        border:none;
        cursor:pointer;
        padding:5px 4px;
        display:inline-flex;
        align-items:center;
        gap:6px;
    }
    .fl-adv-toggle:hover{text-decoration:underline;}
    .fl-adv-toggle .tri{font-size:10px;transition:transform .18s;display:inline-block;}
    .fl-adv-toggle.open .tri{transform:rotate(90deg);}

    /* Advanced panel */
    .fl-advanced{
        margin-top:18px;
        padding-top:20px;
        border-top:1px solid var(--fl-line-soft);
    }
    .fl-adv-field{margin-bottom:20px;}
    .fl-adv-field:last-child{margin-bottom:4px;}
    .fl-adv-label{font-size:14px;font-weight:600;color:var(--fl-ink);margin:0 0 4px;}
    .fl-adv-sub{font-size:13px;color:var(--fl-muted);margin:0 0 10px;line-height:1.5;}
    .fl-adv-sub a{color:var(--fl-teal);text-decoration:none;}
    .fl-adv-sub a:hover{text-decoration:underline;}
    .fl-adv-input{
        width:100%;font-family:var(--fl-sans);font-size:15px;padding:11px 13px;
        border:1px solid var(--fl-line);border-radius:9px;background:#FBFCFD;outline:none;
        transition:border-color .15s,box-shadow .15s;
    }
    .fl-adv-input:focus{border-color:var(--fl-teal);box-shadow:0 0 0 3px rgba(14,122,99,.12);}
    .fl-advanced input[type=range]{width:100%;accent-color:var(--fl-teal);}
    .fl-adv-thresh{font-family:var(--fl-mono);color:var(--fl-teal);font-weight:500;}
    .fl-sources{display:flex;gap:22px;flex-wrap:wrap;}
    .fl-sources label{font-size:14px;color:var(--fl-ink-2);display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;}
    .fl-sources input{accent-color:var(--fl-teal);width:16px;height:16px;}

    /* Results area */
    .fl-results-head{
        margin:38px 0 18px;
        border-top:1px solid var(--fl-line);
        padding-top:30px;
        display:flex;
        align-items:baseline;
        gap:14px;
        flex-wrap:wrap;
    }
    .fl-results-head h2{
        font-family:var(--fl-serif);
        font-weight:500;
        font-size:26px;
        margin:0;
        color:var(--fl-ink);
    }
    .fl-results-head .tag{
        font-family:var(--fl-mono);
        font-size:11px;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:var(--fl-ochre);
    }
	.fl-page-head h2,
	.fl-h2{
		font-family:var(--fl-serif);
		font-weight:600;
		font-size:30px;
		line-height:1.1;
		letter-spacing:-.01em;
		margin:0;
		color:var(--fl-ink);
	}

    /* Motif page: stat boxes */
    .fl-statbar{
        display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
        margin:28px 0 22px;
    }
    .fl-stat{
        flex:1 1 150px;max-width:220px;
        background:var(--fl-card);
        border:1px solid var(--fl-line);
        border-radius:12px;
        padding:18px 16px;
        display:flex;flex-direction:column;align-items:center;gap:6px;
        text-align:center;
        box-shadow:0 1px 2px rgba(23,35,47,.04);
    }
    .fl-stat-num{
        font-family:var(--fl-serif);font-weight:600;font-size:34px;
        line-height:1;color:var(--fl-teal);
    }
    .fl-stat-label{
        font-size:13px;color:var(--fl-muted);line-height:1.4;
    }

    /* Motif page: in-page nav pills */
    .fl-navpills{
        display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
        margin:0 0 26px;
    }
    .fl-pill{
        font-family:var(--fl-mono);font-size:13px;color:var(--fl-ink-2);
        background:#F1F5F4;border:1px solid var(--fl-line-soft);
        border-radius:999px;padding:7px 15px;
        text-decoration:none;transition:all .13s;
    }
    .fl-pill:hover{
        border-color:var(--fl-teal);color:var(--fl-teal);
        background:#EAF4F1;text-decoration:none;
    }

    /* Map */
    #map{
        height:500px;width:100%;margin:0 auto;
        border-radius:12px;border:1px solid var(--fl-line);
        background:linear-gradient(180deg,#FBFCFD,#F3F6F8);
    }
    .fl-map-cap{
        font-size:12.5px;color:var(--fl-muted);font-style:italic;
        text-align:center;margin:9px 0 12px;
    }
    .fl-map-controls{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
    .fl-mapgroup{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:center;}
    .fl-map-div{align-self:stretch;width:1px;min-height:22px;background:rgba(23,35,47,.18);flex:0 0 auto;}
    .fl-mapbtn{
        font-family:var(--fl-mono);font-size:13px;color:var(--fl-ink-2);
        background:#F1F5F4;border:1px solid var(--fl-line-soft);
        padding:5px 13px;border-radius:999px;cursor:pointer;text-decoration:none;transition:all .13s;
    }
    .fl-mapbtn:hover{border-color:var(--fl-teal);color:var(--fl-teal);background:#EAF4F1;}
    .fl-mapbtn.active{background:var(--fl-teal);border-color:var(--fl-teal);color:#fff;}
    .fl-btn-quiet{
        font-family:var(--fl-sans);font-size:13.5px;color:var(--fl-ink-2);
        background:var(--fl-card);border:1px solid var(--fl-line);
        padding:6px 14px;border-radius:9px;cursor:pointer;transition:all .13s;
    }
    .fl-btn-quiet:hover{border-color:var(--fl-teal);color:var(--fl-teal);}

    /* Summary card */
    .fl-summary{
        background:var(--fl-card);
        border:1px solid var(--fl-line);
        border-radius:12px;
        padding:18px 22px;
        margin:22px 0 18px;
    }
    .fl-summary h3{
        font-family:var(--fl-serif);font-weight:500;font-size:19px;
        margin:0 0 10px;color:var(--fl-ink);
    }
    .fl-summary p{font-size:14.5px;color:var(--fl-ink-2);line-height:1.65;margin:0 0 10px;}
    .fl-summary strong{color:var(--fl-ink);font-weight:600;}
    .fl-summary details summary{cursor:pointer;font-size:14px;color:var(--fl-ink-2);}
    .fl-summary details summary:hover{color:var(--fl-teal);}
    .fl-summary ul{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.7;}
    .fl-summary ul a{color:var(--fl-teal);text-decoration:none;}
    .fl-summary ul a:hover{text-decoration:underline;}

    /* Semantic (vector) results */
    .fl-vector{
        background:#FBF7EF;
        border:1px solid #EADFC8;
        border-radius:12px;
        padding:16px 22px;
        margin:0 0 18px;
    }
    .fl-vector summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--fl-ink);}
    .fl-vector summary:hover{color:var(--fl-ochre);}
    .fl-vector-item{border-top:1px solid #EADFC8;padding-top:12px;margin-top:12px;}
    .fl-vector-item p{font-size:14px;color:var(--fl-ink-2);margin:0 0 6px;}
    .fl-vector-item a{color:var(--fl-teal);text-decoration:none;}
    .fl-vector-item a:hover{text-decoration:underline;}
    .fl-vector-item blockquote{
        font-family:var(--fl-serif);font-style:italic;font-size:15px;
        color:var(--fl-ink-2);border-left:3px solid var(--fl-ochre);
        margin:0;padding:2px 0 2px 14px;line-height:1.6;
    }
    .fl-vector-score{font-family:var(--fl-mono);color:var(--fl-ochre);font-weight:500;}

    /* Results table */
    .fl-table-bar{
        display:flex;justify-content:space-between;align-items:center;
        gap:14px;flex-wrap:wrap;margin:6px 0 12px;
    }
    .fl-table-bar h4{
        font-family:var(--fl-sans);font-size:15px;font-weight:600;
        color:var(--fl-ink);margin:0;
    }
    .fl-table-bar h4 .num{font-family:var(--fl-mono);color:var(--fl-teal);}

    .fl-table-wrap{
        background:var(--fl-card);
        border:1px solid var(--fl-line);
        border-radius:12px;
        overflow:hidden;
        margin-bottom:40px;
    }
    .results-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0;}
    .results-table th,.results-table td{
        border:none;border-bottom:1px solid var(--fl-line-soft);border-left:1px solid var(--fl-line-soft);
        padding:10px 12px;text-align:left;vertical-align:top;color:var(--fl-ink-2);
    }
    .results-table th:first-child,.results-table td.type-icon{border-left:none;}
    .results-table tbody tr:last-child td{border-bottom:none;}
    .results-table thead th{
        background:#F7FAF9;
        font-family:var(--fl-mono);
        font-size:11.5px;
        letter-spacing:.08em;
        text-transform:uppercase;
        font-weight:500;
        color:var(--fl-muted);
        border-bottom:1px solid var(--fl-line);
        white-space:nowrap;
    }
    .results-table thead th a{text-decoration:none;color:inherit;}
    .results-table thead th a:hover{color:var(--fl-teal);}
    .results-table tbody tr:hover{background:#F4F8F7;}
    .results-table td a{color:var(--fl-teal);text-decoration:none;}
    .results-table td a:hover{text-decoration:underline;}
    .results-table .type-icon{font-size:1.4em;text-align:center;vertical-align:middle;}
    .fl-mytheme-note{color:var(--fl-muted);font-size:.9em;font-style:italic;}
    .semantic-icon{color:var(--fl-ochre);cursor:help;}

    .fl-noresults{
        font-size:15px;color:var(--fl-ink-2);
        background:var(--fl-card);border:1px solid var(--fl-line);
        border-radius:12px;padding:18px 22px;
    }

    /* Errors */
    .error-message{
        color:#8C2F2F;background:#FBEFEF;border:1px solid #EBCFCF;
        padding:12px 16px;border-radius:10px;margin-top:1rem;font-size:14.5px;
    }

    /* Help panels (shown before a search) */
    .fl-help{margin-top:34px;}
    .fl-help details{
        background:var(--fl-card);border:1px solid var(--fl-line);
        border-radius:12px;padding:14px 20px;margin-bottom:12px;
    }
    .fl-help summary{
        cursor:pointer;font-size:15px;font-weight:600;color:var(--fl-ink);
        padding:2px 0;
    }
    .fl-help summary:hover{color:var(--fl-teal);}
    .fl-help .fl-help-body{padding:12px 4px 4px;color:var(--fl-ink-2);font-size:14.5px;line-height:1.65;}
    .fl-help .fl-help-body a{color:var(--fl-teal);text-decoration:none;}
    .fl-help .fl-help-body a:hover{text-decoration:underline;}
    .fl-help code{
        font-family:var(--fl-mono);font-size:13px;color:var(--fl-teal);
        background:#F1F5F4;border:1px solid var(--fl-line-soft);
        border-radius:5px;padding:1px 5px;
    }

    .hidden{display:none;}

    @media (max-width:860px){
        .fl-page-head h1{font-size:32px;}
        .fl-search-row{flex-direction:column;}
        .fl-btn-search{padding:14px;}
    }
    .fl-searchpage :focus-visible,.fl-page :focus-visible,.fl-landing :focus-visible{outline:2px solid var(--fl-teal);outline-offset:2px;border-radius:4px;}
    /* ==================================================================
       Landing page (index.php)
       ------------------------------------------------------------------
       Everything already declared above (search card, advanced panel,
       form controls, tokens) is reused as-is. The rules here are either
       landing-only, or landing overrides of a class the motif page uses
       differently — .fl-stat in particular is a card there and a hairline
       grid cell here, so those are scoped under .fl-landing.
       ================================================================== */
    .fl-landing{
        text-align:left;               /* .content-section centres by default */
        font-family:var(--fl-sans);
        color:var(--fl-ink);
        max-width:940px;
        margin:0 auto;
        padding-top:16px;
        -webkit-font-smoothing:antialiased;
    }

    /* Hero — centred as a block; the rest of the page stays left-aligned */
    .fl-hero{margin-bottom:34px;text-align:center;}
    .fl-hero .fl-eyebrow{margin:0 0 14px;}
    .fl-landing .fl-hero h1{
        font-size:52px;
        line-height:1.02;
        margin:0 0 16px;
        text-align:center;
    }
    .fl-hero .fl-lede{
        font-size:18px;
        line-height:1.55;
        color:var(--fl-ink-2);
        max-width:660px;
        margin:0 auto;
    }

    /* Example-query chips */
    .fl-chips-row{
        display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px;
    }
    .fl-chips-label{
        font-family:var(--fl-mono);font-size:12px;letter-spacing:.06em;
        color:var(--fl-muted);margin-right:2px;
    }
    .fl-chip{
        font-family:var(--fl-mono);font-size:13px;color:var(--fl-ink-2);
        background:#F1F5F4;border:1px solid var(--fl-line-soft);
        padding:5px 11px;border-radius:999px;cursor:pointer;transition:all .13s;
    }
    .fl-chip:hover{border-color:var(--fl-teal);color:var(--fl-teal);background:#EAF4F1;}

    /* Landing-only behaviour for shared controls */
    .fl-landing .fl-adv-toggle{margin-left:auto;}
    .fl-landing .fl-advanced{display:none;}
    .fl-landing .fl-advanced.show{display:block;}

    /* Stats — hairline-separated grid with mono figures.
       (The motif page's .fl-stat cards are defined above and untouched.) */
    .fl-landing .fl-stats{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        margin:30px 0 8px;
        border:1px solid var(--fl-line);
        border-radius:12px;
        background:var(--fl-card);
        overflow:hidden;
    }
    .fl-landing .fl-stats .fl-stat{
        display:block;flex:none;max-width:none;text-align:left;
        padding:20px 22px;
        border:none;border-left:1px solid var(--fl-line-soft);
        border-radius:0;box-shadow:none;background:none;
    }
    .fl-landing .fl-stats .fl-stat:first-child{border-left:none;}
    .fl-landing .fl-stat-num{
        font-family:var(--fl-mono);
        font-size:26px;
        font-weight:500;
        letter-spacing:-.02em;
        line-height:1.2;
        color:var(--fl-ink);
    }
    .fl-landing .fl-stat-label{
        font-size:12.5px;color:var(--fl-muted);margin-top:5px;line-height:1.35;
    }

    /* Signature: dispersal map band */
    .fl-mapband{
        margin:44px 0 12px;
        border-top:1px solid var(--fl-line);
        padding-top:34px;
    }
    .fl-mapband-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap;}
    .fl-landing .fl-mapband-head h2{
        font-weight:500;
        font-size:23px;
        margin:0;
    }
    .fl-mapband-head .tag{
        font-family:var(--fl-mono);
        font-size:11px;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:var(--fl-ochre);
    }
    .fl-mapband p{font-size:15px;color:var(--fl-ink-2);margin:0 0 18px;max-width:640px;line-height:1.55;}
    .fl-mapband-pic img,.fl-mapfig{
        width:100%;
        display:block;
        border:1px solid var(--fl-line);
        border-radius:12px;
        background:linear-gradient(180deg,#FBFCFD,#F3F6F8);
    }
    .fl-mapfig-cap{
        font-size:12.5px;color:var(--fl-muted);font-style:italic;margin:9px 2px 0;
    }

    /* Browse line — single quiet secondary path */
    .fl-browse{margin:34px 0 24px;font-size:15px;color:var(--fl-ink-2);}
    .fl-browse a{color:var(--fl-teal);text-decoration:none;border-bottom:1px solid transparent;}
    .fl-browse a:hover{border-bottom-color:var(--fl-teal);}
    .fl-browse .sep{color:var(--fl-line);margin:0 4px;}

    /* Fade-in on load */
    .fl-rise{opacity:0;transform:translateY(10px);animation:flrise .6s cubic-bezier(.2,.7,.3,1) forwards;}
    .fl-d1{animation-delay:.02s;} .fl-d2{animation-delay:.12s;}
    .fl-d3{animation-delay:.22s;} .fl-d4{animation-delay:.34s;}
    @keyframes flrise{to{opacity:1;transform:none;}}

    @media (max-width:860px){
        .fl-landing .fl-hero h1{font-size:38px;}
        .fl-landing .fl-stats{grid-template-columns:1fr 1fr;}
        .fl-landing .fl-stats .fl-stat:nth-child(3){border-left:none;}
        .fl-landing .fl-stats .fl-stat:nth-child(n+3){border-top:1px solid var(--fl-line-soft);}
    }
    @media (prefers-reduced-motion:reduce){
        .fl-rise{animation:none;opacity:1;transform:none;}
    }

    /* ------------------------------------------------------------------
       Multi-field form rows (db_choose_motifs.php). Reuses .fl-search-row,
       .fl-adv-input and .fl-sources; these are the only additions needed.
       ------------------------------------------------------------------ */
    .fl-search-row .fl-adv-input{flex:1;min-width:0;}
    select.fl-adv-input{cursor:pointer;}
    .fl-search .fl-sources{margin-top:15px;}
    .fl-actions{margin-top:20px;text-align:center;}
    .fl-page-head .fl-sub{
        font-size:17px;color:var(--fl-ink-2);line-height:1.5;margin:10px 0 0;
    }

    /* Stored cross-reference markup inside ATU summaries (<motif>, <atu>) */
    .fl-searchpage motif,.fl-searchpage atu,
    .fl-page motif,.fl-page atu{
        font-family:var(--fl-mono);font-size:.92em;
    }
    .fl-searchpage motif a,.fl-searchpage atu a,
    .fl-page motif a,.fl-page atu a{
        color:var(--fl-teal);text-decoration:none;
    }
    .fl-searchpage motif a:hover,.fl-searchpage atu a:hover,
    .fl-page motif a:hover,.fl-page atu a:hover{
        text-decoration:underline;
    }