/* Halden's framework hub (tools/framework_hub.py; STAGING ONLY behind FRAMEWORK_HUB_LIVE). Mobile first: the boxes in
   one column inside the reporting frame; from 900px the map in the deck slide 4 layout with arrows between the rows. */
.fh-hero { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; padding-bottom: 8px; }
.fh-lead { max-width: 64ch; margin: 0; }
.fh-sec { padding-top: 24px; padding-bottom: 32px; }
.fh-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fh-box { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--accent-deep);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; line-height: 1.25; text-align: center; cursor: pointer; }
.fh-appetite, .fh-policies { border-color: var(--ink); }
.fh-moving { border-style: dashed; }
.fh-arr { display: none; color: var(--ink-2); justify-content: center; }
.fh-arr svg { width: 12px; height: 22px; }
.fh-links { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.fh-link:hover { background: var(--surface-2); }
.fh-lk { font-family: var(--font-data); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fh-ready .fh-rl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fh-rl li { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--border-strong); background: var(--surface); }
.fh-rp { font-family: var(--font-data); font-weight: 700; color: var(--accent-deep); word-break: break-all; }
.fh-rl span { font-size: 14.5px; line-height: 1.45; }
@media (min-width: 720px) { .fh-ready .fh-rl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .fh-map { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 0;
    grid-template-areas:
      "app app pol"
      "a1 a2 a3"
      "eme reg pro"
      "u1 u2 u3"
      "mov mov mov"; }
  .fh-appetite { grid-area: app; } .fh-policies { grid-area: pol; } .fh-emerging { grid-area: eme; } .fh-register { grid-area: reg; }
  .fh-processes { grid-area: pro; } .fh-moving { grid-area: mov; }
  .fh-a-a1 { grid-area: a1; } .fh-a-a2 { grid-area: a2; } .fh-a-a3 { grid-area: a3; } .fh-a-u1 { grid-area: u1; } .fh-a-u2 { grid-area: u2; }
  .fh-a-u3 { grid-area: u3; }
  .fh-arr { display: flex; padding: 6px 0; }
  .fh-box { min-height: 72px; font-size: 17px; }
}

/* two-line boxes (founder 24 Oct): the plain label first, the formal name smaller under it, then an optional role line */
.fh-box { flex-direction: column; gap: 3px; }
.fh-bf { font-family: var(--font-data); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 899px) { .fh-box { min-height: 64px; } }

/* founder 24 Oct, light overall view: a short hero, the map as a big centred image inside the dotted reporting frame
   (lighter and finer than the telltale signs' dashed box), then one card per box, then the connect bullets */
.fh-mapsec { padding-top: 8px; }
.fh-frame { position: relative; max-width: 1040px; margin: 14px auto 0; padding: 30px 12px 14px; border: 2.5px dotted var(--ink-3, #9FB6BB); border-radius: 22px; }
.fh-frame-l { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 36px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 12px; border-radius: 99px; background: var(--ground, var(--surface-2));
  font-family: var(--font-data); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; line-height: 1.5; }
.fh-frame-l:hover { color: var(--ink); text-decoration: underline; }
.fh-frame-l:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
a.fh-box { text-decoration: none; }
a.fh-box:hover { background: var(--surface-2); }
a.fh-box:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.fh-moving { border-style: dashed; border-width: 2px; border-color: var(--accent-deep); }
.fh-parts { padding-top: 12px; }
.fh-pi { margin: 6px 0 14px; max-width: 64ch; }
.fh-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fh-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); border-top: 4px solid var(--accent-deep); background: var(--surface); scroll-margin-top: 16px; }
.fh-card.fh-c-moving { border-top-style: dashed; }
.fh-card:target, .fh-card.is-hit { box-shadow: 0 0 0 3px var(--accent-deep); }
.fh-card .fh-dh { margin: 0; font-size: 18px; }
.fh-dsub { margin: 0; font-family: var(--font-data); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fh-card .fh-role { margin: 0; font-size: 15px; line-height: 1.5; flex: 1 1 auto; }
.fh-card .fh-links { margin-top: 4px; }
.fh-parts .fh-bul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fh-parts .fh-bul li { padding-left: 14px; border-left: 3px solid var(--ink-3, #9FB6BB); }
@media (min-width: 720px) {
  .fh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fh-parts .fh-bul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
}
@media (min-width: 900px) {
  .fh-frame { padding: 36px 30px 28px; }
  .fh-box { min-height: 84px; }
  .fh-bn { font-size: 18px; }
}
@media (min-width: 1100px) { .fh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fh-lk { white-space: nowrap; } .fh-link { flex-wrap: wrap; column-gap: 8px; row-gap: 0; max-width: 100%; }

/* governance round (25 Oct): the framework statement above the map, the governance line under it */
.fh-statement { margin: 0 auto 6px; max-width: 1040px; text-align: center; font-size: 17px; font-weight: 600; color: var(--ink); }
.fh-gov { margin: 16px auto 0; max-width: 1040px; text-align: center; font-size: 16px; }

/* founder override 25 Oct: two plain text links per card */
.fh-tls { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fh-tl { font-size: 15px; font-weight: 600; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.fh-tl:hover { color: var(--ink); }

/* founder 25 Oct: the parts cards a touch lighter than milk (#FDFFF9, still never pure white), with a soft shadow so the
   edge reads on the ground. Teal top border and the dashed telltale-signs variant unchanged. */
.fh-card { background: #FDFFF9; box-shadow: 0 1px 2px rgba(31, 70, 81, .06), 0 6px 18px -6px rgba(31, 70, 81, .14); }

/* the teal CTA panel (.cta-panel) moved to site.css on 25 Oct: the Halden page, a live page, uses it too */

/* founder 25 Oct: the approach pages' hero map (framework_hub.hero_nav, placed by register_library.page). The hub map,
   compact, beside the hero (from 960px) or under it; always the three-column map with its arrows, the reader's box
   teal with milk text (5.08:1) and aria-current. Replaces the old Outside / Inside the business strip. */
.fh-herorow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
.fh-mini { min-width: 0; padding-bottom: 8px; }
.fh-mini .fh-frame { max-width: none; margin: 18px 0 0; padding: 22px 8px 10px; border-width: 2px; border-radius: 18px; }
.fh-mini .fh-frame-l { top: -12px; font-size: 10.5px; padding: 2px 10px; }
.fh-mini .fh-frame-l::before, .fh-mini .fh-box::before { content: ''; position: absolute; inset: -12px -4px; }   /* 44px tap area, no visual change */
.fh-mini .fh-box::before { inset: -2px; }
.fh-mini .fh-map { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; row-gap: 0;
  grid-template-areas: "app app pol" "a1 a2 a3" "eme reg pro" "u1 u2 u3" "mov mov mov"; }
.fh-mini .fh-appetite { grid-area: app; } .fh-mini .fh-policies { grid-area: pol; } .fh-mini .fh-emerging { grid-area: eme; }
.fh-mini .fh-register { grid-area: reg; } .fh-mini .fh-processes { grid-area: pro; } .fh-mini .fh-moving { grid-area: mov; }
.fh-mini .fh-a-a1 { grid-area: a1; } .fh-mini .fh-a-a2 { grid-area: a2; } .fh-mini .fh-a-a3 { grid-area: a3; }
.fh-mini .fh-a-u1 { grid-area: u1; } .fh-mini .fh-a-u2 { grid-area: u2; } .fh-mini .fh-a-u3 { grid-area: u3; }
.fh-mini .fh-arr { display: flex; padding: 3px 0; }
.fh-mini .fh-arr svg { width: 8px; height: 14px; }
.fh-mini .fh-box { position: relative; min-height: 48px; padding: 6px 6px; gap: 2px; border-width: 1.5px; border-radius: 10px; font-size: 13px; line-height: 1.2; }
.fh-mini .fh-moving { border-width: 1.5px; }
.fh-mini .fh-bn { font-size: inherit; }
.fh-mini .fh-bf { font-size: 9.5px; letter-spacing: .04em; line-height: 1.25; }
.fh-mini a.fh-box.is-here, .fh-mini a.fh-box.is-here:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--surface); }
.fh-mini .fh-box.is-here .fh-bf { color: var(--surface); }
.fh-mini .fh-frame-l.is-here, .fh-mini .fh-frame-l.is-here:hover { background: var(--accent-deep); color: var(--surface); text-decoration: none; }
@media (min-width: 600px) {
  .fh-mini .fh-box { font-size: 14px; padding: 8px 8px; }
  .fh-mini .fh-bf { font-size: 10px; }
}
@media (min-width: 960px) {
  .fh-herorow { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; }
  .fh-mini { padding-top: 18px; }
  .fh-mini .fh-frame { padding: 24px 12px 12px; }
  .fh-mini .fh-box { min-height: 56px; }
}

/* RMF round (founder, 25 Oct): hero text left and the framework map right from 960px, stacked below; the components
   in the blog listing's card (site.css .post-card-live), one link each. */
.fh-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
.fh-top .fh-hero, .fh-top .fh-mapsec { padding-left: 0; padding-right: 0; }
@media (min-width: 960px) {
  .fh-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding-top: 12px; }
  .fh-top .fh-hero { padding-top: 20px; }
  .fh-top .fh-frame { margin-top: 28px; padding: 32px 16px 18px; }
  .fh-top .fh-map { column-gap: 12px; }
  .fh-top .fh-box { min-height: 72px; font-size: 15.5px; padding: 10px 10px; }
  .fh-top .fh-gov { font-size: 15px; }
}
.fh-cards.post-grid { gap: 16px; }
.fh-cards > li { display: flex; }
.fh-comp { flex: 1 1 auto; min-height: 0; background: var(--surface); }
.fh-comp .fh-dsub { margin: -4px 0 0; }
.fh-hero .crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; }

/* item G (founder, 25 Oct): the board report placeholder on the approach pages (framework_hub.soon_html): a heading, a
   line and a "Releasing soon" tag, beside a muted outline of the report (no image, no link) */
.fw-soon { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.fw-soon-txt { display: flex; flex-direction: column; gap: 12px; max-width: 46em; min-width: 0; }
.fw-soon-txt .h2-sm { margin: 0; }
.fw-soon-tag { align-self: flex-start; }
.fw-soon-vis { min-width: 0; }
.fw-soon-frame { display: flex; flex-direction: column; gap: 10px; aspect-ratio: 1440 / 763; padding: 18px; border-radius: 14px;
  border: 1.5px dashed var(--border-strong); background: var(--surface-2); overflow: hidden; }
.fw-sk { display: block; border-radius: 8px; background: var(--border); }
.fw-sk-t { width: 46%; height: 16px; flex: none; }
.fw-sk-l { width: 72%; height: 10px; flex: none; }
.fw-sk-row { display: flex; gap: 10px; flex: none; }
.fw-sk-row:has(.fw-sk-card) { flex: 1 1 auto; }
.fw-sk-tile { flex: 1; height: 40px; }
.fw-sk-card { flex: 1; }
@media (min-width: 960px) { .fw-soon { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } }

.fw-soon-follow { margin: 4px 0 0; font-weight: 600; color: var(--ink); }
.fw-soon .follow-box { margin-top: 2px; max-width: 480px; }

/* item H (founder, 25 Oct): the approach pages' hero map lines up with the breadcrumb. Both columns start at the top of
   the row; the map's frame starts where the hero's first line (the crumbs) starts, and its label sits inside the frame,
   on its own line, instead of across the border. */
.fh-herorow { align-items: start; }
.fh-mini { padding-top: 0; padding-bottom: 0; }
.fh-mini .fh-frame { margin: 0; padding: 8px 8px 10px; }
.fh-mini .fh-frame-l { position: relative; top: auto; left: auto; transform: none; display: block; width: max-content; max-width: 100%;
  margin: 0 auto 8px; padding: 2px 10px; background: transparent; }
@media (min-width: 960px) {
  .fh-mini .fh-frame { padding: 8px 12px 12px; }
}


/* the hub (RMF v2, founder 25 Oct): governance and the AI roadmap as sections in the home page's rhythm */
.fh-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.fh-txt { display: flex; flex-direction: column; gap: 12px; max-width: 46em; min-width: 0; }
.fh-txt .h2-sm, .fh-txt p { margin: 0; }
.fh-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fh-points li { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: #FDFFF9; font-size: 15.5px; line-height: 1.5;
  box-shadow: 0 1px 2px rgba(31, 70, 81, .06), 0 6px 18px -6px rgba(31, 70, 81, .14); }
.fh-roadmap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fh-roadmap li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--ground); }
.fh-rm-pill { flex: none; min-width: 58px; text-align: center; padding: 3px 10px; border-radius: 99px; font-family: var(--font-data); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid var(--accent-deep); color: var(--accent-deep); background: var(--surface); }
.fh-rm-now .fh-rm-pill { background: var(--accent-deep); color: var(--surface); }
.fh-rm-later .fh-rm-pill { border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
.fh-rm-t { font-size: 15.5px; line-height: 1.5; }
@media (min-width: 960px) { .fh-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }
.fh-rm-t b { display: block; font-size: 16px; margin-bottom: 2px; }
.fh-rm-pill { min-width: 76px; }
/* "In build" reads as work in progress: an amber-deep dashed outline, distinct from the solid teal "Now" */
.fh-rm-inbuild .fh-rm-pill { border-style: dashed; border-color: var(--amber-deep); color: var(--amber-deep); background: var(--surface); }

/* item J.1 (founder, 25 Oct; reverses H.1): the breadcrumb sits on its own line above the hero row
   (register_library.hero_map moves it into .fh-crumbrow), so the hero row starts with the eyebrow. The map's frame,
   label included, starts level with the eyebrow's top: neither column carries any top padding or margin. */
.fh-crumbrow { padding-top: 22px; }
.fh-crumbrow .crumbs { margin: 0; }
.fh-crumbrow + .fh-herorow { margin-top: 14px; }
.fh-herorow > .rl-hero { padding-top: 0; margin-top: 0; }
.fh-herorow > .rl-hero > .label:first-child { margin-top: 0; }
.fh-herorow > .fh-mini { padding-top: 0; margin-top: 0; }

/* item K (founder, 25 Oct): the hub hero. The breadcrumb and the eyebrow sit above the row, so the map's top (its
   frame label, which sits across the frame's top border) lines up with the top of the H1; 20px more under the lead. */
.fh-hub-crumbs { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }
.fh-hub-crumbs .crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fh-hub-crumbs + .fh-top { padding-top: 12px; align-items: start; }
.fh-hub-crumbs + .fh-top .fh-hero { padding-top: 0; padding-bottom: 28px; }
.fh-hub-crumbs + .fh-top .fh-hero .display { margin-top: 0; }
.fh-hub-crumbs + .fh-top .fh-mapsec { padding-top: 0; }
@media (min-width: 960px) { .fh-hub-crumbs + .fh-top .fh-frame { margin-top: 12px; } }

/* item K: parts not yet on www. A production build shows plain boxes and cards with a Coming soon marker (no link, no
   hover lift); a staging build keeps the links and marks them "Coming soon on www" (amber-deep, dashed: review only). */
.fh-soonmark { display: block; margin-top: 2px; font-family: var(--font-data); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
a.fh-box .fh-soonmark, a.fh-frame-l .fh-soonmark, .fh-more .fh-soonmark { color: var(--amber-deep); }
.fh-frame-l .fh-soonmark, .fh-more .fh-soonmark { display: inline; margin: 0 0 0 6px; }
.fh-box.is-soon { opacity: 1; border-style: dashed; border-color: var(--border-strong); background: var(--surface-2); color: var(--ink-2); }   /* not site.css .is-soon 0.62: keep the text at full contrast */
.fh-box.is-soon .fh-bf { color: var(--ink-2); }
.fh-frame-l.is-soon { opacity: 1; color: var(--ink-2); cursor: default; text-decoration: none; }
.fh-soon-tag { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: 99px; border: 1.5px dashed var(--ink-2); background: var(--surface);
  font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fh-soon-stg { border-color: var(--amber-deep); color: var(--amber-deep); margin-bottom: 4px; }
.fh-comp-soon { cursor: default; }
.fh-comp-soon:hover { transform: none; box-shadow: none; }
.fh-soon-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fh-soon-micro { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
/* governance and AI sections (RMF v3) */
.fh-glist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fh-glist li { padding-left: 12px; border-left: 3px solid var(--accent-deep); font-size: 15px; line-height: 1.5; }
.fh-next { margin: 4px 0 0; color: var(--ink-2); }
.fh-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.fh-pill-inbuild { min-width: 0; border-style: dashed; border-color: var(--amber-deep); color: var(--amber-deep); background: var(--surface); }
.fh-steps { margin: 4px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.fh-steps li::marker { font-family: var(--font-data); font-weight: 700; color: var(--accent-deep); }
.fh-ai-vis { align-items: flex-start; }
.fh-ai-vis .teams-card { justify-self: auto; max-width: 480px; }

/* r24b (founder, 26 Oct): the components section runs the full content width (heading and grid), and a Coming soon
   card's pill sits at the bottom, where a live card's link sits */
.fh-parts .sec-wide .sec-text { max-width: 60em; }
.fh-parts .sec-wide .sec-text .h2-sm { max-width: none; }
.fh-parts .sec-visual, .fh-parts .fh-cards { width: 100%; }
.fh-comp-soon { display: flex; flex-direction: column; }
.fh-comp-soon .fh-soon-foot { margin-top: auto; padding-top: 6px; }
.fh-plain { margin: 4px 0 0; color: var(--ink-2); }