/* =====================================================================
   Public land-node detail page (V1.3).
   A node carries ~70 content columns; the old page showed six. The job of this
   sheet is to make a fully-populated node scannable rather than a wall: a hero
   that answers "what and where", a sticky nav, then panels of label/value pairs.
   Palette + radii come from mln-directory.css's --mln-* tokens.
   ===================================================================== */

/* ---------------------------------------------------------------- hero */
.mln-node-hero {
    padding: 1.25rem 0 0.5rem;
}

.mln-node-title {
    font: 700 clamp(1.6rem, 3.2vw, 2.35rem)/1.12 var(--mln-disp, system-ui, sans-serif);
    letter-spacing: -0.02em;
    color: var(--mln-ink, #132420);
    margin: 0 0 0.6rem;
}

.mln-node-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.mln-node-summary {
    font: 400 1.05rem/1.65 var(--mln-ui, system-ui, sans-serif);
    color: var(--mln-muted, #5c6b65);
    max-width: 62ch;
    margin: 0 0 1.1rem;
}

/* Key facts: an at-a-glance row, auto-fitting so 2 facts look as deliberate as 4. */
.mln-node-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    margin: 0 0 0.5rem;
}
.mln-node-fact {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mln-line, #e3ebe7);
    border-radius: var(--mln-r-sm, 10px);
    background: var(--mln-surface, #fff);
    box-shadow: var(--mln-shadow-sm, 0 1px 2px rgba(19,36,32,.06));
}
.mln-node-fact dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mln-faint, #93a099);
    margin-bottom: 0.2rem;
}
.mln-node-fact dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mln-ink, #132420);
    /* A long focus string must not stretch the tile past its neighbours. */
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- layout */
.mln-node-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.75rem;
    align-items: start;
    margin-top: 1.25rem;
}
/* minmax(0, 1fr) above matters: without it a wide child (a table in a panel)
   can force the main column past the viewport and scroll the whole page. */

.mln-node-main { min-width: 0; }

.mln-node-aside {
    min-width: 0;
    /*
      The aside must fill the grid ROW, not just its own content, or the sticky child
      below cannot move at all.

      .mln-node-grid sets align-items:start, which sizes every item to its content. That
      made this column exactly as tall as the card inside it — measured 431px against a
      431px child, i.e. ZERO travel room. A sticky element can only move within its
      containing block, so it was correctly "stuck" and simply had nowhere to go: it
      scrolled away with the page and looked like position:sticky was being ignored.
      Stretching this one item (the main column keeps start alignment) gives the card the
      full row to travel down — measured 0px -> 13348px of range on a populated node.
    */
    align-self: stretch;
}
.mln-node-aside-sticky {
    position: sticky;
    /*
      Park clear of BOTH sticky layers above: the topbar, then the section nav, with the
      standard gap on either side of the nav. The old 4.25rem predated the nav moving below
      the topbar and left the map 21px underneath it — measured, not guessed.
    */
    top: calc(var(--mln-topnav-h, 64px) + var(--mln-secnav-h, 41px)
              + 2 * var(--mln-stack-gap, 0.75rem));
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mln-node-aside-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--mln-line, #e3ebe7);
    border-radius: var(--mln-r, 14px);
    background: var(--mln-surface, #fff);
}
.mln-node-aside-card h3 {
    font: 700 0.78rem/1 var(--mln-ui, system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mln-faint, #93a099);
    margin: 0 0 0.6rem;
}
.mln-node-aside-facts dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mln-faint, #93a099);
    margin-top: 0.5rem;
}
.mln-node-aside-facts dd {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--mln-ink, #132420);
}

/* ---------------------------------------------------------------- panels */
.mln-node-panel {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--mln-line, #e3ebe7);
}
.mln-node-panel:last-child { border-bottom: 0; }
/* Anchored jumps land under the sticky nav rather than beneath it. */
.mln-node-panel { scroll-margin-top: 4.5rem; }

.mln-node-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font: 700 1.15rem/1.25 var(--mln-disp, system-ui, sans-serif);
    letter-spacing: -0.01em;
    color: var(--mln-ink, #132420);
    margin: 0 0 1rem;
}
.mln-node-panel-title i { color: var(--mln-primary, #00594c); font-size: 1.05rem; }

.mln-node-prose {
    font: 400 1rem/1.7 var(--mln-ui, system-ui, sans-serif);
    color: var(--mln-ink, #132420);
    max-width: 70ch;
    /* Intake-sourced prose arrives with real newlines and no markup. */
    white-space: pre-line;
}

/* Two columns of label/value, with long prose spanning both. */
.mln-node-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0;
}
.mln-node-field.is-wide { grid-column: 1 / -1; }

.mln-node-field dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mln-faint, #93a099);
    margin-bottom: 0.2rem;
}
.mln-node-field dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mln-ink, #132420);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* A wide field is prose, so give it prose measure rather than full bleed. */
.mln-node-field.is-wide dd { max-width: 70ch; }

.mln-node-panel h3 {
    font: 700 0.95rem/1.3 var(--mln-ui, system-ui, sans-serif);
    color: var(--mln-muted, #5c6b65);
    margin: 1.2rem 0 0.6rem;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .mln-node-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    /* Un-stick the aside once it is stacked, or the map pins itself mid-scroll. */
    .mln-node-aside-sticky { position: static; }
    .mln-node-aside { order: -1; }
}

@media (max-width: 640px) {
    .mln-node-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .mln-node-fields { grid-template-columns: 1fr; }
    .mln-node-panel { padding: 1.15rem 0; }
    .mln-node-summary { font-size: 1rem; }
}

/* ---------- V1.5 — favourite / save button in the node hero ----------
   The button reuses .mln-dir-save so the directory's JS (mlnWishlistToggle +
   the hydrate() pre-fill pass) drives it unchanged. That class is tuned for an
   absolutely-positioned 2rem circle on a card thumbnail, so every one of those
   geometry rules is overridden here. The selector is doubled
   (.mln-dir-save.mln-node-save) so it wins on specificity rather than on
   stylesheet order — mln-directory.css and mln-node-detail.css are loaded by
   two different mechanisms (template vs page), and relying on their order is
   how a rule silently stops existing. */
.mln-node-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.mln-node-hero-main { flex: 1 1 20rem; min-width: 0; }
.mln-node-hero-actions { flex: 0 0 auto; padding-top: 1.35rem; }

.mln-dir-save.mln-node-save {
    position: static;
    top: auto; left: auto;
    width: auto; height: auto;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    gap: 0.45rem;
    font: 600 0.85rem/1.35 var(--mln-body, system-ui, sans-serif);
    background: var(--mln-surface, #fff);
    border: 1px solid var(--mln-line, #dfe5e2);
    white-space: nowrap;
}
.mln-dir-save.mln-node-save:hover {
    transform: none;
    background: var(--mln-bg, #f4f7f5);
    border-color: var(--mln-accent, #c2571f);
}
.mln-dir-save.mln-node-save.saved {
    background: var(--mln-accent, #c2571f);
    border-color: var(--mln-accent, #c2571f);
    color: #fff;
}