/* ============================================================================
   AI Construct Lexis — Newsprint / Working Paper theme
   --------------------------------------------------------------------------
   Visual goal: read like an academic journal article.  The chrome is type
   and rules; color is reserved for the actual graph (its nodes and the
   small functional keys that map to those nodes).  Loaded after the inline
   styles in view_network.html so it wins the cascade.
   ========================================================================== */

:root {
    /* ----- Palette -------------------------------------------------------- */
    --paper:          #faf7f2;   /* warm cream page background          */
    --paper-shade:    #f3efe6;   /* one shade darker for subtle blocks  */
    --surface:        #ffffff;   /* card / panel surface                */
    --ink:            #1c1917;   /* deep warm near-black                */
    --ink-2:          #292524;   /* secondary ink                       */
    --ink-muted:      #57534e;   /* secondary text                      */
    --ink-faint:      #78716c;   /* tertiary text                       */
    --rule:           #d6d3d1;   /* hairline divider — slightly stronger so
                                    horizontal rules read as journal rules */
    --rule-thin:      #e7e5e4;   /* very thin divider                  */

    /* Cardinal stays — but used as a true spot color (links, active-tab
       underline, top stripe, version pill).  NOT for card chrome. */
    --accent:         #9b2c2c;
    --accent-deep:    #7a1f1f;
    --accent-tint:    rgba(155, 44, 44, 0.06);
    --accent-edge:    rgba(155, 44, 44, 0.30);

    /* Category hues — kept for the GRAPH (nodes, legend, swatches) only.
       They no longer appear on cards, tabs, pills, or backgrounds. */
    --cat-construct:    #166534;
    --cat-measurement:  #1d4ed8;
    --cat-behavior:     #9a3412;

    /* Compatibility aliases for older variable names. */
    --bg0:#faf7f2; --bg1:#f3efe6;
    --card:#ffffff; --card2:#faf7f2;
    --text:#1c1917; --muted:#57534e; --muted2:#78716c;
    --border: var(--rule-thin);
    --shadow: none; --shadow2: none;
    --radius: 6px; --radius-sm: 4px;
    --brand: var(--accent); --brand2: var(--accent-deep);
    --green: var(--cat-construct);
    --pink:  var(--cat-behavior);
    --blue:  var(--cat-measurement);
    --danger:#b91c1c;

    /* ----- Type stack ----------------------------------------------------- */
    --font-serif: 'Newsreader', 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================================
   Global
   ========================================================================== */
html, body { height: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Two thin rules at the top — the publication "masthead" pattern.
       A 1px ink rule above a 2px cardinal stripe.  Both fixed so they
       stay put on scroll. */
    background-image:
        linear-gradient(var(--ink), var(--ink)),
        linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 1px, 100% 2px;
    background-position: top left, 0 1px;
    background-attachment: fixed, fixed;
}

.container {
    max-width: 1480px;
    padding: 32px 28px 36px;
}

/* ============================================================================
   Header / branding
   ========================================================================== */
header {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--ink);   /* journal masthead bottom rule */
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 22px 0 18px;
}

h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 34px;
    letter-spacing: -0.012em;
    line-height: 1.12;
    color: var(--ink);
    margin-bottom: 12px;
}
h1 > * { vertical-align: middle; }

/* ============================================================================
   Team / byline block (also inlined in view_network.html for cache safety)
   ========================================================================== */
.team-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}
.team-block .team-label {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-top: 2px;
}
.team-block .team-roster { flex: 1 1 auto; min-width: 0; }
.team-block .author { display: inline; }
.team-block .author + .author::before {
    content: " · ";
    margin: 0 6px;
    color: var(--ink-faint);
    font-weight: 400;
}
.team-block .author-name { color: var(--ink); font-weight: 500; white-space: nowrap; }
.team-block .author-affil {
    margin-left: 4px;
    font-style: italic;
    color: var(--ink-muted);
    font-size: 12px;
}
.team-block .author-affil::before { content: "("; font-style: normal; color: var(--ink-faint); }
.team-block .author-affil::after  { content: ")"; font-style: normal; color: var(--ink-faint); }

/* ============================================================================
   Disclaimers & contact
   --------------------------------------------------------------------------
   Switched from "colored left border" to "rule above + below" — closer to
   how an actual paper sets off a sidebar / footnote block.
   ========================================================================== */
.disclaimer-banner {
    border-radius: 0;
    border: 0;
    border-top:    2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    box-shadow: none;
}
.disclaimer-banner h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--ink);
}
.disclaimer-banner strong { color: var(--ink); }

.contact-box {
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
    box-shadow: none;
    padding-top: 14px;
}
.contact-box-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.contact-link, .substack-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-edge);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.12s ease, color 0.12s ease;
}
.contact-link:hover, .substack-link:hover {
    color: var(--accent-deep);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

/* ============================================================================
   Primary CTA — "Nomological Network" link in the header
   ========================================================================== */
.home-graph-button,
.graph-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 0;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.005em;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.12s ease;
}
.home-graph-button:hover,
.graph-btn:hover { background: var(--ink-2); }
.graph-btn:focus { outline: none; }

/* ============================================================================
   Tabs — newspaper section navigation
   --------------------------------------------------------------------------
   No category color, no fills, no rounded chrome.  Inactive = ink-muted
   text.  Active = full ink with a thick cardinal underline.  That's it.
   ========================================================================== */
.filter-buttons {
    gap: 0;
    flex-wrap: wrap;
    align-items: baseline;
}

.filter-btn {
    border: 0;
    background: transparent !important;
    color: var(--ink-muted);
    box-shadow: none;
    border-radius: 0;
    padding: 6px 12px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: 0.005em;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.filter-btn:hover {
    background: transparent !important;
    color: var(--ink);
    border-color: transparent;
    transform: none;
}

/* Strip ALL category color from inactive tabs. */
.filter-btn[data-type="constructs"],
.filter-btn[data-type="construct"],
.filter-btn[data-type="measurements"],
.filter-btn[data-type="measurement"],
.filter-btn[data-type="behaviors"],
.filter-btn[data-type="behavior"] {
    background: transparent !important;
    color: var(--ink-muted) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.filter-btn[data-type="constructs"]:hover,
.filter-btn[data-type="construct"]:hover,
.filter-btn[data-type="measurements"]:hover,
.filter-btn[data-type="measurement"]:hover,
.filter-btn[data-type="behaviors"]:hover,
.filter-btn[data-type="behavior"]:hover {
    background: transparent !important;
    color: var(--ink) !important;
}

/* Active tab — thick cardinal underline, no fill. */
.filter-btn.active,
.filter-btn.active[data-type="constructs"],
.filter-btn.active[data-type="construct"],
.filter-btn.active[data-type="measurements"],
.filter-btn.active[data-type="measurement"],
.filter-btn.active[data-type="behaviors"],
.filter-btn.active[data-type="behavior"] {
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: inset 0 -3px 0 var(--accent) !important;
    font-weight: 600;
    border-radius: 0 !important;
}
.filter-btn.active:hover,
.filter-btn.active[data-type="constructs"]:hover,
.filter-btn.active[data-type="construct"]:hover,
.filter-btn.active[data-type="measurements"]:hover,
.filter-btn.active[data-type="measurement"]:hover,
.filter-btn.active[data-type="behaviors"]:hover,
.filter-btn.active[data-type="behavior"]:hover {
    background: transparent !important;
    color: var(--ink) !important;
}

/* ============================================================================
   Form controls
   ========================================================================== */
.filter-controls {
    border-top: 1px solid var(--rule);
    flex-wrap: wrap;
}
.filter-control input,
input[type="number"].filter-input,
input[type="text"]#searchInput {
    border: 0;
    border-bottom: 1.5px solid var(--rule);
    border-radius: 0;
    padding: 8px 4px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14.5px;
    transition: border-color 0.12s ease;
}
.filter-control input:focus,
input[type="text"]#searchInput:focus {
    border-bottom-color: var(--accent);
    box-shadow: none;
    outline: none;
}

/* ============================================================================
   Main panels
   ========================================================================== */
.main-content { height: calc(100vh - 270px); }

.empty-state.home-intro,
.empty-state.home-intro p,
.empty-state.home-intro h3 { color: var(--ink); }
.empty-state.home-intro h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.empty-state.home-intro p {
    font-family: var(--font-serif);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* Home intro cards — top + bottom rules instead of left-color border. */
.home-intro-section {
    box-shadow: none;
    border: 0;
    border-top:    1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    background: transparent;
    border-radius: 0;
    padding: 18px 0;
    margin-bottom: 0;
}
.home-intro-section + .home-intro-section { border-top: 0; }

/* Strip the per-category tints/borders entirely. */
.home-intro-section-construct,
.home-intro-section-measurement,
.home-intro-section-behavior {
    border-color: var(--ink) var(--rule) var(--rule) var(--rule) !important;
    background: transparent !important;
    border-left: 0 !important;
}

/* ============================================================================
   Results panel + list
   --------------------------------------------------------------------------
   Panel = a flat card with a single ink rule under the section header.
   ========================================================================== */
.results-panel {
    border-radius: 0;
    border: 0;
    border-top: 2px solid var(--ink);
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.results-header {
    background: transparent !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    padding: 14px 16px;
}
.results-header h2,
.results-header h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}

.results-list { padding: 14px; }

/* Tile grid — only kicks in when the list actually contains result tiles
   (i.e., on Constructs / Measurement / Behaviors / a search result page).
   The renderResults() JS wraps the items in an anonymous <div>, so the
   grid has to be applied to that wrapper (one level deeper) — not the
   .results-list itself. */
.results-list > div:has(.result-item) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    align-items: stretch;
}
/* Pagination row should always span the full width regardless of how many
   tile columns the grid currently has. */
.results-list > div > .pagination-controls {
    grid-column: 1 / -1;
    margin-top: 10px;
}

.result-item {
    border-radius: 0;
    border: 1px solid var(--rule-thin);
    background: var(--surface);
    padding: 14px 14px 16px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.result-item:hover {
    background: var(--paper-shade);
    border-color: var(--ink-faint);
}
/* Selected: top rule + paper tint, no left color stripe. */
.result-item.selected {
    background: var(--paper-shade);
    border-color: var(--ink-faint);
    box-shadow: inset 0 3px 0 var(--accent);
}
.result-item.selected .result-name { font-weight: 600; }

/* Re-order tile content: small mono category label at the top, then the
   (serif) name, then the definition.  Matches a journal entry header. */
.result-item .result-type   { order: 1; margin-bottom: 2px; }
.result-item .result-name   { order: 2; }
.result-item .result-definition { order: 3; margin-top: auto; }

.result-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.25;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.result-definition {
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Category labels — bracketed italic mono, no color, no fill.
   Wraps the existing JS-emitted text in [ ] via pseudo-elements. */
.result-type {
    border-radius: 0;
    border: 0;
    background: transparent !important;
    padding: 0 !important;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint) !important;
}
.result-type::before { content: "["; }
.result-type::after  { content: "]"; }
.result-type.construct,
.result-type.measurement,
.result-type.behavior {
    color: var(--ink-faint) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* ============================================================================
   Relationship cards (shown after selecting a node on the home view)
   --------------------------------------------------------------------------
   Drop the colored left borders entirely — these are journal-row entries
   separated by a single hairline.
   ========================================================================== */
.relationship-item {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--rule-thin);
    background: transparent;
    box-shadow: none;
    transition: background 0.12s ease;
}
.relationship-item:hover { background: var(--paper-shade); transform: none; }
.relationship-item.construct,
.relationship-item.measurement,
.relationship-item.behavior {
    border-left: 0;
}

/* "Definitions" / dropdown labels in editorial small caps. */
.definitions-dropdown label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* ============================================================================
   Tooltips
   ========================================================================== */
.expert-flag-tooltip {
    border: 1px solid var(--ink-2);
    background: var(--ink) !important;
    color: var(--paper) !important;
    box-shadow: 0 6px 20px rgba(28, 25, 23, 0.20);
    border-radius: 0;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    position: relative;
    user-select: none;
}
.info-icon .info-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: min(360px, 70vw);
    max-width: min(360px, 70vw);
    padding: 10px 12px;
    border-radius: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    border: 1px solid var(--ink-2);
    box-shadow: 0 8px 22px rgba(28, 25, 23, 0.22);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.info-icon .info-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--ink);
}
.info-icon:hover .info-tooltip,
.info-icon:focus-within .info-tooltip { opacity: 1; visibility: visible; }

/* ============================================================================
   Footer
   ========================================================================== */
.site-footer {
    margin-top: 28px;
    border-top: 2px solid var(--ink);
    padding-top: 18px;
}

/* ============================================================================
   Accessibility
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0;
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
    .container { padding: 22px 18px 28px; }
    header { padding: 18px; }
    .main-content { height: calc(100vh - 320px); }
    h1 { font-size: 28px; }
}

@media (max-width: 800px) {
    header > div:first-child {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filter-buttons {
        display: flex !important;
        gap: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .filter-btn, .graph-btn {
        min-width: auto;
        padding: 8px 12px;
        font-size: 14px;
        white-space: nowrap;
    }
    .search-section { flex-direction: column; gap: 8px; }
    .filter-controls { flex-direction: column; gap: 8px; align-items: stretch; }
    .site-footer .contact-box { text-align: center; padding: 12px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}