/* Interactive onboarding concept, scoped to the Spine walkthrough. */
:root { --leaf-sm:10px 0 10px 0; --leaf-lg:18px 0 18px 0; --radius-pill:9999px; }
.onboarding-slide { padding-top:40px; padding-bottom:86px; }
.onboarding-slide .lede { max-width:1050px; margin-bottom:18px; }
.onb-label { display:block; color:var(--gold); font:700 11px/1.5 var(--font-display); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; }
.onb-decision { margin-top:22px; padding-top:16px; border-top:1px solid var(--border); color:var(--gray); font:500 15px/1.6 var(--font-display); }
.loop-track { display:grid; grid-template-columns:1fr 36px 1fr 36px 1fr; margin:24px 0 0; }
.loop-node { border-top:2px solid var(--gold); padding:24px 24px 24px 0; }
.loop-node b { font:700 36px/1 var(--font-display); color:var(--gold); }
.loop-node h3 { font:700 23px/1.3 var(--font-display); margin:20px 0 14px; }
.loop-node p { color:var(--gray); font-size:18px; }
.loop-arrow { align-self:center; color:var(--gold); font-size:28px; }
.loop-return { border:1px solid var(--border); border-top:0; padding:20px; text-align:center; color:var(--gold); font:600 16px/1.6 var(--font-display); }
.mf-review-link { margin-top:20px; font:500 13px var(--font-display); }
.mf-review-link a,.mf-explain a { color:var(--gold); text-underline-offset:4px; }
.mf-layout { display:grid; grid-template-columns:minmax(180px,.5fr) minmax(0,2fr); gap:28px; align-items:center; }
.mf-explain h3 { font:700 20px/1.4 var(--font-display); margin-bottom:12px; }
.mf-explain p { font-size:16px; color:var(--gray); margin-bottom:20px; }
.mf-explain a { font:500 12px/1.6 var(--font-display); }
.mf-app { font:500 13px/1.5 var(--font-display); min-width:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--black-mid); }
.mf-top { display:flex; align-items:center; gap:20px; padding:14px 22px; border-bottom:1px solid var(--border); }
.mf-top img { width:105px; height:28px; object-fit:contain; }
.mf-top span { color:var(--gold); font-size:12px; }
.mf-top small { margin-left:auto; color:var(--gray-mid); font-size:10px; }
.mf-progress { display:flex; gap:6px; padding:12px 22px; border-bottom:1px solid var(--border); background:var(--black); flex-wrap:wrap; }
.mf-progress span { color:var(--gray-mid); font-size:11px; padding:4px 8px; }
.mf-progress span.is-active { color:var(--gold); border-bottom:2px solid var(--gold); }
.mf-content { padding:22px; min-height:380px; }
.mf-scroll-hint { padding:6px 22px; color:var(--gold); background:var(--black); font-size:11px; border-top:1px solid var(--border); }
@media (min-width:651px) {
  .mf-content { min-height:300px; max-height:max(320px, calc(100vh - 440px)); overflow-y:auto; scrollbar-color:var(--gold) var(--black); scrollbar-gutter:stable; }
}
.mf-content h3 { font:700 25px/1.25 var(--font-display); margin-bottom:8px; letter-spacing:-.02em; }
.mf-content h4 { font:700 15px/1.4 var(--font-display); margin-bottom:6px; }
.mf-content p { font:400 15px/1.55 var(--font-body); color:var(--gray); margin:6px 0 16px; }
.mf-content small { font-size:11px; color:var(--gray-mid); }
.mf-kicker { color:var(--gold); text-transform:uppercase; font-size:10px; letter-spacing:.12em; margin-bottom:9px; }
.mf-disclaimer { padding:9px 22px; border-top:1px solid var(--border); color:var(--gray-mid); font-size:10px; }
.mf-app button,.mf-app input,.mf-app select,.mf-app textarea { font:inherit; }
.mf-app button,.mf-app summary { cursor:pointer; }
.mf-app button { border:1px solid var(--border); background:transparent; color:var(--gray); padding:9px 12px; border-radius:var(--radius-md); }
.mf-app button:hover { border-color:var(--gold); color:var(--gold); }
.mf-app button:disabled { opacity:.45; cursor:not-allowed; }
.mf-app :focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.mf-app .mf-primary { background:var(--gold); border-color:var(--gold); color:var(--black); border-radius:var(--leaf-sm); font-weight:800; }
.mf-app .mf-primary:hover { color:var(--black); opacity:.9; }
.mf-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--border); margin-top:18px; padding-top:14px; }
.mf-app .mf-text { border:0; padding:4px 0; color:var(--gray-mid); text-decoration:underline; text-underline-offset:4px; font-size:12px; }
.mf-app label { display:block; font-size:12px; font-weight:600; }
.mf-app input:not([type=checkbox]),.mf-app select,.mf-app textarea { width:100%; background:var(--black); color:var(--white); border:1px solid var(--gray-700); border-radius:var(--radius-md); padding:9px 10px; margin:5px 0 9px; }
.mf-app textarea { min-height:64px; resize:vertical; }
.mf-app input[type=checkbox] { accent-color:var(--gold); margin-right:8px; }
.mf-app input::file-selector-button { background:var(--black-soft); color:var(--gold); border:1px solid var(--border); border-radius:var(--radius-md); padding:6px 10px; margin-right:8px; font:inherit; cursor:pointer; }
.mf-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.mf-buckets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; }
.mf-app .mf-bucket { display:flex; flex-direction:column; text-align:left; padding:18px 14px; border-radius:var(--radius-lg); min-width:0; min-height:212px; background:var(--black); }
.mf-bucket[aria-pressed=true] { border-color:var(--gold); background:var(--black-soft); box-shadow:inset 0 3px var(--gold); }
.mf-bucket strong { font-size:16px; color:var(--white); }
.mf-bucket .mf-count { font-size:26px; color:var(--gold); margin-top:auto; letter-spacing:-.03em; }
.mf-logos { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; align-items:center; }
.mf-logo { display:inline-flex; gap:6px; align-items:center; color:var(--white); font-size:11px; }
.mf-logo img { width:25px; height:25px; object-fit:contain; filter:invert(1); }
.mf-bucket .mf-logos { min-height:64px; }
.mf-bucket .mf-logo { flex:1 0 40%; }
.mf-path { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; color:var(--gray-mid); font-size:11px; }
.mf-path span { border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 8px; }
.mf-win { color:var(--gold); background:var(--black); border-left:2px solid var(--gold); padding:10px 13px; margin-bottom:14px; }
.mf-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mf-member { display:flex; flex-direction:column; gap:10px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:15px; background:var(--black); min-width:0; }
.mf-member .mf-logo { font-size:20px; font-weight:800; }
.mf-member .mf-logo img { width:32px; height:32px; }
.mf-person { display:flex; gap:9px; align-items:center; border-top:1px solid var(--border); padding-top:12px; }
.mf-avatar { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius-circle,50%); flex:none; color:var(--gold); font-size:11px; }
.mf-person strong,.mf-person small { display:block; }
.mf-member p { font-size:13px; margin:0; }
.mf-ask { padding:9px; background:var(--black-soft); border-radius:var(--radius-md); }
.mf-ask b { color:var(--gold); display:block; font-size:10px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.06em; }
.mf-member > button { margin-top:auto; }
.mf-member details { font-size:11px; color:var(--gray-mid); }
.mf-member summary { text-decoration:underline; text-underline-offset:3px; }
.mf-tray { border:1px solid var(--gold); border-radius:var(--radius-md); padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.mf-tray .mf-logo { font-size:15px; font-weight:700; }
.mf-tray small { display:block; }
.mf-tray p { margin:0; font-size:13px; }
.mf-calendar-discovery { padding:12px; background:var(--black-soft); border-radius:var(--radius-md); display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.mf-calendar-discovery b,.mf-calendar-discovery small { display:block; }
.mf-calendar-discovery button { border-color:var(--gold); color:var(--gold); flex:none; }
.mf-contact { border:1px solid var(--border); border-radius:var(--radius-md); padding:11px 13px; margin-bottom:9px; }
.mf-contact[open] { border-color:var(--gold); }
.mf-contact summary { color:var(--white); }
.mf-contact small { display:block; margin:3px 0 8px; }
.mf-contact .mf-fields { margin-top:8px; }
.mf-preview { border:1px solid var(--gold); border-radius:var(--radius-lg); padding:17px; background:var(--black); }
.mf-preview .mf-person { border-top:0; padding-top:0; margin-bottom:12px; }
.mf-preview p { font-size:14px; }
.mf-preview .mf-label { display:block; font-size:10px; text-transform:uppercase; color:var(--gold); margin:12px 0 4px; }
.mf-calendar { border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; background:var(--black); }
.mf-days { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:10px 0; }
.mf-days button[aria-pressed=true] { border-color:var(--gold); color:var(--gold); }
.mf-days b { display:block; }
.mf-calendar-head { display:flex; justify-content:space-between; gap:12px; }
.mf-calendar-head select { width:auto; padding:4px; margin:0; }
.mf-times { display:grid; grid-template-columns:45px 1fr 1fr; gap:6px; align-items:center; }
.mf-times span { font-size:11px; color:var(--gray-mid); }
.mf-times button { grid-column:span 2; text-align:left; padding:8px 12px; }
.mf-times button[aria-pressed=true] { border-color:var(--gold); color:var(--gold); background:var(--black-soft); }
.mf-times .mf-busy { padding:8px; background:var(--black-soft); border-radius:var(--radius-sm); }
.mf-request { border:1px solid var(--gold); border-radius:var(--radius-md); padding:12px; margin:0 0 14px; }
.mf-request b { color:var(--gold); }
.mf-request small { display:block; }
.mf-notice { color:var(--gold); margin-top:10px; font-size:12px; }
.mf-upload { border:1px dashed var(--gray-700); border-radius:var(--radius-md); padding:14px; }
@media (max-width:1100px) { .mf-layout { grid-template-columns:1fr; gap:10px; } .mf-explain { display:none; } }
@media (max-width:650px) {
  .mf-buckets,.mf-cards,.mf-columns { grid-template-columns:1fr; }
  .mf-app .mf-bucket { min-height:170px; }
  .mf-top { flex-wrap:wrap; gap:10px; }
  .mf-top small { margin-left:0; }
  .mf-content { padding:16px; }
  .mf-progress { padding:10px; gap:0; }
  .mf-progress span { font-size:10px; padding:4px; }
  .mf-calendar-discovery,.mf-tray,.mf-actions { flex-wrap:wrap; }
  .loop-track { grid-template-columns:1fr; }
  .loop-arrow { transform:rotate(90deg); justify-self:center; }
  .onboarding-slide { padding-bottom:128px; }
  .cmt-toolbar { max-width:calc(100vw - 24px); overflow-x:auto; bottom:60px; }
  .cmt-toolbar .cmt-btn { flex:none; }
  .nav { bottom:10px; right:12px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }