/* ===========================================================================
   MPMA Phase 3 — front door, section hubs, facilitators, mobile nav.

   Kept in its own file so MPMA's simplification pass is reviewable on its own
   and can be reverted without touching the rest of the app's styling.

   Sizing here is deliberately generous. The Phase 3 direction asks for "large,
   obvious buttons", "strong visual hierarchy", and use by "someone with very
   limited technology experience" — and a good share of this audience is on a
   phone. Nothing below 15px, and every target is a full-width tap on mobile.
   =========================================================================== */

/* --- the five-item seeker nav ---------------------------------------------- */
/* Bigger than a 37-link sidebar could afford to be. */
.sidebar nav > a.nav-help {
  margin-top: 18px; padding: 12px 14px; align-items: flex-start;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
}
.sidebar nav > a.nav-help:hover { background: rgba(255, 255, 255, .18); }
.sidebar nav > a.nav-help .nav-lbl { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.sidebar nav > a.nav-help small { font-size: 12px; opacity: .85; font-weight: 400; }

.brand.brand-home { cursor: pointer; border-radius: 10px; }
.brand.brand-home:hover .brand-title { text-decoration: underline; }
.brand.brand-home:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- front door ------------------------------------------------------------ */
.mp-door { max-width: 900px; }
.mp-door-h { font-family: Montserrat, sans-serif; font-size: 30px; line-height: 1.2; margin: 0 0 10px; }
.mp-door-lede { font-size: 18px; line-height: 1.5; margin: 0 0 10px; }
.mp-door-sub { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 0 0 22px; max-width: 68ch; }
.mp-door-q { font-family: Montserrat, sans-serif; font-size: 22px; margin: 26px 0 14px; }

.mp-door-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mp-door-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left; padding: 22px; min-height: 168px;
  border: 2px solid var(--border); border-radius: 14px; background: #fff;
  cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s;
}
.mp-door-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .09); }
.mp-door-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mp-door-card strong { font-family: Montserrat, sans-serif; font-size: 19px; }
.mp-door-card > span:last-child { font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.mp-door-card.wide { min-height: 0; }
.mp-door-ic {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; background: var(--soft); border: 1px solid var(--border);
}
.mp-door-ic svg { width: 24px; height: 24px; }

/* The not-sure option, visually distinct from the four -- it is the choice this
   audience most often needs and least often clicks. */
.mp-unsure {
  margin: 26px 0 0; padding: 22px; border-radius: 14px;
  background: var(--soft); border: 1px solid var(--border); border-left: 5px solid var(--primary);
}
.mp-unsure h3 { font-family: Montserrat, sans-serif; font-size: 20px; margin: 0 0 6px; }
.mp-unsure p { font-size: 16px; line-height: 1.55; margin: 0 0 14px; max-width: 62ch; }
.mp-unsure small { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }

/* The nine-step checklist, one disclosure down instead of front and centre. */
.mp-checklist { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 16px; }
.mp-checklist > summary { font-size: 16px; font-weight: 600; cursor: pointer; padding: 6px 0; }
.mp-checklist > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Find Your Path ------------------------------------------------------- */
.mp-fp-count { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.mp-fp-opts { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 22px; max-width: 620px; }
.mp-fp-opt {
  text-align: left; padding: 18px 20px; font-size: 17px; line-height: 1.4;
  border: 2px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer;
}
.mp-fp-opt:hover { border-color: var(--primary); background: var(--soft); }
.mp-fp-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mp-fp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.mp-fp-rec { margin: 18px 0; max-width: 620px; }

/* --- section hubs --------------------------------------------------------- */
.mp-hub { max-width: 940px; }
.mp-hub-lede { font-size: 17.5px; line-height: 1.55; margin: 0 0 24px; max-width: 70ch; }
.mp-hub-group { margin-bottom: 30px; }
.mp-hub-group h3 {
  font-family: Montserrat, sans-serif; font-size: 18px; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.mp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* A group with an odd number of cards used to leave a dead half-row. Three cards
   put the third alone on the left with an empty cell beside it -- which is what
   Explore Careers showed once TriMetrix dropped out of "Understand what you
   already bring" -- and the many one-card groups ("Get the pay right", "See it
   for yourself") rendered as half a card and half nothing. A lone trailing card
   takes the whole row instead, so no hub shows a hole regardless of how many
   tools a group holds or how many of them this viewer is allowed to see. */
.mp-cards > .mp-card:last-child:nth-child(odd) { grid-column: 1 / -1; align-items: center; }
.mp-card {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 18px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.mp-card:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(0, 0, 0, .07); }
.mp-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mp-card-ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 9px; background: var(--soft); border: 1px solid var(--border);
}
.mp-card-ic svg { width: 20px; height: 20px; }
.mp-card-body strong { display: block; font-size: 16.5px; margin-bottom: 4px; }
.mp-card-body p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* Back on the left, feedback on the right, one row. Feedback is deliberately
   quieter than the back link: always available, never the next step. */
.mp-hub-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.mp-back {
  margin: 4px 0 0; background: none; border: none; color: var(--primary);
  font-size: 15.5px; font-weight: 600; cursor: pointer; padding: 8px 0;
}
.mp-back:hover { text-decoration: underline; }
.mp-foot-link {
  margin: 4px 0 0; background: none; border: none; color: var(--muted);
  font-size: 14.5px; cursor: pointer; padding: 8px 0; text-align: right;
}
.mp-foot-link:hover { color: var(--primary); text-decoration: underline; }
.mp-foot-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* --- human support -------------------------------------------------------- */
.mp-support {
  margin-top: 30px; padding: 24px; border-radius: 14px;
  background: var(--soft); border: 1px solid var(--border); border-left: 5px solid var(--primary);
}
.mp-support h3 { font-family: Montserrat, sans-serif; font-size: 20px; margin: 0 0 8px; }
.mp-support p { font-size: 16px; line-height: 1.55; margin: 0 0 14px; max-width: 64ch; }

.mp-fac-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 22px; }
/* Same orphan rule as the cards: an odd number of facilitators leaves no hole. */
.mp-fac-list > .mp-fac:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mp-fac {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
/* An initial, not a stock photo. A fabricated face attached to a real named
   person is worse than no face at all. */
.mp-fac-mark {
  flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--primary); color: #fff;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 20px;
}
.mp-fac-body strong { display: block; font-size: 17px; }
.mp-fac-title { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.mp-fac-body p { margin: 0; font-size: 15px; line-height: 1.5; }
.mp-fac-call { font-size: 16.5px; }
/* Book a call with Sandy (MPMA, 2026-09-14) — replaces the phone line. An
   action, so a real 44px target; scoped to the class itself because the
   per-person button sits inside .mp-fac-body, never inside .mp-fac-call. */
.mp-fac-book {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; text-decoration: none; font: inherit;
  font-size: 16.5px; font-weight: 600; line-height: 1.2; box-sizing: border-box;
}
.mp-fac-book:hover, .mp-fac-book:focus-visible { filter: brightness(1.08); color: #fff; text-decoration: none; }
.mp-fac-book:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mp-fac-book-inline { margin-top: 10px; align-self: flex-start; padding: 10px 16px; font-size: 15px; }
@media (max-width: 480px) { .mp-fac-book-inline { display: flex; width: 100%; } }
.mp-book-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.mp-book { background: var(--card, #fff); color: var(--text, #0f172a); border-radius: 12px; padding: 22px 24px;
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.mp-book h3 { margin: 0 0 4px; }
.mp-book-sub { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.mp-book-day { margin: 0 0 12px; }
.mp-book-times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mp-book-slot { min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line, #cbd5e1);
  background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mp-book-slot:hover, .mp-book-slot:focus-visible { border-color: var(--primary); color: var(--primary); }
.mp-book-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* --- getting back ---------------------------------------------------------- */
/* Sits above the page title on every view except the front doors. */
.view-back { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; }
.view-back:empty { display: none; }
.view-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 4px 0; min-height: 32px;
}
.view-back-link.vb-section { color: var(--primary); }
.view-back-link:hover { text-decoration: underline; }
.view-back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- one look across every page -------------------------------------------- */
/* The section hubs were built to MPMA's Phase 3 brief — plain language, large
   type, generous spacing, a hairline rule under each group heading. The ~70 tool
   pages behind them were built earlier and run 13-14px where the hubs run
   15-16.5px, so moving from a hub into a tool felt like leaving the product.
   Rather than rewrite seventy files, restyle the primitives they ALL already
   use. Everything here is scoped to #view so the sidebar and topbar are
   untouched. */
#view { font-size: 15.5px; line-height: 1.55; }

#view .card {
  border-radius: 12px; padding: 22px; margin-bottom: 16px;
  box-shadow: none; border: 1px solid var(--border);
}
/* Headings get the hub's typeface and weight everywhere. */
#view .card h2, #view .card h3 {
  font-family: Montserrat, sans-serif; font-size: 17px; font-weight: 700;
  margin: 0 0 12px;
}
/* The hairline rule goes ONLY on a heading that opens the card, matching
   .mp-hub-group h3. Restricted to a direct first child on purpose: plenty of
   tools put a heading inside a flex row next to an icon or a chevron, and a
   border there draws a line across the middle of the card. */
#view .card > h2:first-child, #view .card > h3:first-child {
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
/* A heading that is the card's only content is a label, not a section head. */
#view .card > h2:only-child, #view .card > h3:only-child {
  border-bottom: none; padding-bottom: 0;
}

/* UI.intro() is the lede on most tool pages. On a hub the same sentence is
   plain text, so stop drawing a box around it and let it read as the lede. */
#view .card.intro {
  background: none; border: none; padding: 0; box-shadow: none; margin-bottom: 22px;
}
#view .card.intro > p { font-size: 17px; line-height: 1.55; max-width: 70ch; }
#view .card.intro ul.clean { margin-top: 10px; padding-left: 0; list-style: none; }
#view .card.intro ul.clean li {
  font-size: 14.5px; color: var(--muted); line-height: 1.5;
  padding-left: 16px; position: relative; margin-bottom: 4px;
}
#view .card.intro ul.clean li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary); opacity: .5;
}

/* Readable body copy and labels, and targets big enough on a phone. */
#view .muted { font-size: 14.5px; }
#view .small, #view .muted.small { font-size: 13.5px; }
#view .field > span, #view .step-label, #view label.small {
  font-size: 14px; font-weight: 600; color: var(--text);
}
#view input, #view select, #view textarea {
  font-size: 15.5px; min-height: 44px; border-radius: 9px;
}
#view textarea { min-height: 96px; line-height: 1.5; }
#view button.primary, #view a.primary, #view .btn.primary {
  font-size: 15px; padding: 12px 22px; min-height: 46px; box-shadow: none;
}
#view button.ghost, #view a.ghost {
  font-size: 14.5px; padding: 11px 18px; min-height: 44px; border-radius: 9px;
}
#view .pill, #view .chip { font-size: 12.5px; }
#view .wt-empty { border-radius: 12px; font-size: 15px; }
#view .stat-n { font-family: Montserrat, sans-serif; }
#view .stat-l { font-size: 13px; }

@media (max-width: 760px) {
  #view .card { padding: 18px; }
  #view .card.intro > p { font-size: 16px; }
  #view .grid2 { grid-template-columns: 1fr; }
}

/* --- workforce pipeline band (coach dashboard) ----------------------------- */
.mp-stage-band { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.mp-stage-cell { min-width: 0; }
.mp-stage-n { font-family: Montserrat, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; }
.mp-stage-bar { height: 5px; border-radius: 3px; background: var(--border); margin: 5px 0 6px; overflow: hidden; }
.mp-stage-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.mp-stage-l { font-size: 12px; color: var(--muted); line-height: 1.35; }
/* People nobody has staged yet. Amber, not red — it is a prompt, not a failure. */
.mp-stage-cell.warn .mp-stage-n { color: #b8860b; }
.mp-stage-cell.warn .mp-stage-bar > span { background: #b8860b; }

@media (max-width: 1100px) { .mp-stage-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mp-stage-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- mobile --------------------------------------------------------------- */
/* The menu button is mobile-only; on desktop the sidebar is always present. */
.nav-toggle { display: none; }

/* The base stylesheet turns .sidebar into a wrapped ROW below 760px. With the old
   37-link nav that produced a wall of chips above every page — and it also laid
   the sidebar footer out BESIDE the nav, which pushed the document wider than the
   viewport and clipped the page copy on the right. Both are fixed here by making
   the sidebar a proper column that collapses behind a Menu button. */
@media (max-width: 760px) {
  .mp-door-grid, .mp-cards, .mp-fac-list { grid-template-columns: 1fr; }
  .mp-door-h { font-size: 25px; }
  .mp-door-lede { font-size: 17px; }
  .mp-door-sub { font-size: 15.5px; }
  .mp-door-card { min-height: 0; padding: 18px; }
  .mp-fp-opt { padding: 16px; }

  .app-topbar { padding-right: 12px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 9px; margin-left: auto;
    padding: 10px 14px; min-height: 44px; background: var(--sidebar, #003E6B);
    color: #fff; border: none; border-radius: 10px; font: inherit; font-size: 15px;
    font-weight: 600; cursor: pointer;
  }
  .nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
  .nav-toggle-bars i { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }

  /* Collapsed by default. Overriding the base row layout is the important part. */
  .sidebar {
    display: none; flex-direction: column; position: static;
    max-height: none; overflow: visible; padding: 16px 16px 24px;
  }
  body.nav-open .sidebar { display: flex; }
  .sidebar nav { flex-direction: column; flex-wrap: nowrap; }
  .sidebar nav > a { padding: 14px 12px; font-size: 16.5px; min-height: 48px; }
  .sidebar-foot { margin-top: 20px; }

  /* Nothing may exceed the viewport width — the clipped-copy bug above. */
  #app { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 20px 16px; min-width: 0; overflow-wrap: break-word; }
  .mp-hub, .mp-door { max-width: 100%; }
}