/* Field Notes Ohio: place pages (Oct 2026).
   Story first. The verification panel moves below the narrative, and a slim
   strip under the header keeps the trust signal without leading with it.
   Loaded after app.css, so these rules win on equal specificity. */

/* ---------- 1. Overview panel: reorder without touching the DOM ----------
   The seven detail renderers in app.js all emit the trust panel as the first
   .section of the overview panel. Flex ordering moves it last for both the
   prerendered HTML and anything the app renders client-side, so the two can
   never drift apart. .fno-trust-sec is added by fno-place.js and by
   place_patch.py; :has() covers the frame before the script runs. */
.tabpanel[data-panel="overview"].active {
  display: flex;
  flex-direction: column;
}
.tabpanel[data-panel="overview"] > .section { order: 10; }
.tabpanel[data-panel="overview"] > .section.fno-trust-sec,
.tabpanel[data-panel="overview"] > .section:has(> .trust-panel) {
  order: 90;
  border-bottom: none;
}
/* :last-child is DOM order, not visual order, so restore the rule it drops */
.tabpanel[data-panel="overview"] > .section:last-child { border-bottom: 1px solid var(--line); }
.tabpanel[data-panel="overview"] > .section.fno-trust-sec:last-child,
.tabpanel[data-panel="overview"] > .section:has(> .trust-panel):last-child { border-bottom: none; }

/* The panel reads as reference material now rather than a warning */
.fno-trust-sec > .trust-panel { background: transparent; border-style: dashed; }
.fno-trust-sec > .trust-panel > h4 { color: var(--text-soft); font-size: 0.86rem; letter-spacing: 0.01em; }

/* ---------- 2. Slim trust strip under the header ---------- */
.fno-trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 11px;
  padding: 9px 24px;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--text-soft);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
/* Dividers are drawn on the items themselves rather than set as separate
   characters, so a wrap can never leave a "·" stranded at the end of a line. */
.fno-tb-item + .fno-tb-item {
  border-left: 1px solid var(--line);
  padding-left: 11px;
}
.fno-trustbar b { font-weight: 600; color: var(--text); }
.fno-trustbar a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.fno-trustbar a:hover { text-decoration: none; opacity: 0.75; }
@media (max-width: 640px) {
  .fno-trustbar { padding-left: 16px; padding-right: 16px; font-size: 0.7rem; gap: 3px 0; }
  .fno-tb-item { width: 100%; }
  .fno-tb-item + .fno-tb-item { border-left: none; padding-left: 0; }
}

/* ---------- 3. Hero photo in the place header ----------
   app.css sets `.detail-header > * { position:relative; z-index:1 }`, so the
   background image needs the more specific selector to sit behind the text,
   the same way svg.contours does. */
/* app.css keeps the detail column at 760px and fakes a full-bleed header with
   a box-shadow, which a photo cannot use. So widen the column (as fno-home.css
   does for the home hero) and put the 760px back on everything except the
   header, whose own text is re-constrained by .fno-dh-in. */
.app:has(.detail.show > .detail-header.fno-has-photo) { max-width: none !important; }
.app:has(.detail.show > .detail-header.fno-has-photo) > .detail > :not(.detail-header) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.detail-header.fno-has-photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 0;
  box-shadow: none;
  clip-path: none;
}
.fno-dh-in {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 24px 20px;
}
.detail-header > img.fno-dh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-header > .fno-dh-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(12, 24, 17, 0.94) 0%,
    rgba(12, 24, 17, 0.80) 32%,
    rgba(12, 24, 17, 0.46) 68%,
    rgba(12, 24, 17, 0.30) 100%
  );
}
/* the decorative contour lines are for the plain green header, not over a photo
   (descendant, not child: the wrapper moved them a level down) */
.detail-header.fno-has-photo svg.contours { display: none; }
.fno-dh-credit {
  margin: 12px 0 0;
  font-size: 0.64rem;
  line-height: 1.4;
  color: rgba(239, 232, 214, 0.68);
}
.fno-dh-credit a { color: rgba(239, 232, 214, 0.9); }
@media (max-width: 640px) {
  .detail-header.fno-has-photo { min-height: 240px; }
  .fno-dh-in { padding: 24px 16px 16px; }
}

/* A photo header is already dark; keep it dark in both themes rather than
   following --hero-bg, so the scrim and the text contrast stay predictable.
   Same three-rule shape app.css uses for every dark-mode override. */
:root[data-theme="dark"] .detail-header > .fno-dh-scrim {
  background: linear-gradient(
    to top,
    rgba(8, 16, 12, 0.95) 0%,
    rgba(8, 16, 12, 0.84) 32%,
    rgba(8, 16, 12, 0.52) 68%,
    rgba(8, 16, 12, 0.34) 100%
  );
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .detail-header > .fno-dh-scrim {
    background: linear-gradient(
      to top,
      rgba(8, 16, 12, 0.95) 0%,
      rgba(8, 16, 12, 0.84) 32%,
      rgba(8, 16, 12, 0.52) 68%,
      rgba(8, 16, 12, 0.34) 100%
    );
  }
}