/* The curated match feed and in-app alerts (matches.js). Uses the Daylight tokens set in jobs.css.
   Phone first (375px): one column, everything wraps, nothing wider than the screen, every tap target at
   least 44px tall with 8px between, nothing that needs hover. Wider screens get more room, not more parts. */
.mfeed { gap: 16px; min-width: 0 }
.mfeed, .m-band, .m-broader, .m-inbox, .mcard { grid-template-columns: minmax(0, 1fr) }   /* long words wrap instead of widening the page */
.mfeed h1:focus { outline: none }
.mfeed button { touch-action: manipulation }   /* no double-tap zoom delay */
.m-intro { margin: -8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 62ch }
.m-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end }
.m-alerts { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px }
.m-alerts[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.m-alerts b:empty { display: none }
.m-alerts b, #n-inbox { background: var(--sun); color: var(--ink); border-radius: 99px; font-size: 11px; min-width: 20px; padding: 2px 6px; text-align: center }
.m-note { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); color: var(--ink); font-size: 14.5px; line-height: 1.45 }
.m-note.warn { background: var(--warn-soft); color: var(--warn) }
.m-summary { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5 }
.m-summary b { color: var(--ink) }
.m-busy { color: var(--muted); font-style: italic }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* setup and honest empty states */
.m-setup h2, .m-none h2 { font-size: clamp(22px, 4vw, 30px); margin: 0 }
.m-setup .row { flex-wrap: wrap; gap: 8px }
.m-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.m-steps li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); font-size: 14.5px; line-height: 1.45 }
.m-steps li span { color: var(--ink-2) }
.m-steps li.done { background: var(--accent-soft) } .m-steps li.done b { color: var(--accent-deep) }
.m-none p { margin: 0; color: var(--ink-2); line-height: 1.5 }

/* bands */
.m-band { display: grid; gap: 12px; min-width: 0 }
.m-band > h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 6px 0 0; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.15 }
.m-band > h2 small { font: 600 13px var(--f); color: var(--ink-2); letter-spacing: 0 }
.m-count { margin-left: auto; align-self: center; font: 700 13px/1 var(--f); background: var(--bg-2); color: var(--ink); border-radius: 99px; padding: 6px 11px; letter-spacing: 0 }
.band-top > h2 .m-count { background: var(--sun) }
.band-strong > h2 .m-count { background: var(--accent-soft); color: var(--accent-deep) }
.m-empty-band { margin: 0 }
.m-cards { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) }

/* broader possibilities: always its own section, visibly set apart */
.m-broader { display: grid; gap: 12px; padding: 16px 14px; border: 1.5px dashed var(--line-2); border-radius: 22px; background: var(--unknown); min-width: 0; margin-top: 10px }
.m-broader h2 { margin: 0; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.15 }
.m-broader > p { margin: 0; color: var(--ink-2); line-height: 1.5; font-size: 15px }
.m-broader .eyebrow { margin: 0 }
.m-broader .row { gap: 8px }
.m-broader .row .ghost { min-height: 44px }
.m-sugg { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line) }
.m-sugg h3 { font-size: 16px; margin: 0 }
.m-sugg ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45 }
.m-sugg .note { margin: 0 }

/* one match */
.mcard { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow-wrap: break-word; scroll-margin: 64px 0 96px }
.mcard:focus { outline: 2px solid var(--accent); outline-offset: 2px }
.mcard.band-top { border-color: var(--sun); box-shadow: inset 4px 0 0 var(--sun) }
.mcard.broader { background: var(--surface); border-style: dashed }
.m-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between }
.m-id { min-width: 0; flex: 1 }
.m-id h3 { overflow-wrap: anywhere; margin: 0; font-size: 20px; line-height: 1.2 }
.m-church { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.4 }
.m-score { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 68px; max-width: 88px; padding: 8px 8px 6px; border-radius: 16px; background: var(--bg-2); text-align: center }
.m-score b { font: 800 26px/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums }
.m-score span { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--ink-2) }
.band-top .m-score { background: var(--sun) } .band-top .m-score span { color: var(--ink) }
.band-strong .m-score { background: var(--accent-soft) } .band-strong .m-score span { color: var(--accent-deep) }
.band-below .m-score { background: var(--unknown); border: 1px dashed var(--line-2) }

.m-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.m-chips .chip { white-space: normal; max-width: 100%; line-height: 1.3 }
.m-class { background: var(--bg-2); color: var(--ink) }
.m-class.cls-step_up { background: var(--accent-soft); color: var(--accent-deep) }
.m-class.cls-pivot { background: #EFE9FF; color: #4A3A8C }
.m-class.cls-stretch { background: var(--warn-soft); color: var(--warn) }
/* confidence: a tap shows what limits it; the hit area reaches 44px without making the chip big */
.m-conf { position: relative; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; gap: 6px }
.m-conf::after { content: ""; position: absolute; inset: -9px -3px }
.m-conf-i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 10px/1 var(--f) }
.m-conf.conf-high { border-color: var(--accent); color: var(--accent-deep) }
.m-conf.conf-low { border-style: dashed; color: var(--ink-2) }
.m-conf[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.m-limits { padding: 10px 14px; border-radius: 14px; background: var(--bg-2); font-size: 14.5px; line-height: 1.45 }
.m-limits[hidden] { display: none }
.m-limits ul { margin: 6px 0; padding-left: 18px }
.m-limits p { margin: 4px 0 0 }

.m-unmet { padding: 10px 14px; border-radius: 14px; background: var(--no-soft); color: var(--ink); border-left: 4px solid var(--no); font-size: 14.5px; line-height: 1.45 }
.m-unmet b { color: var(--no) }
.m-unmet ul { margin: 4px 0; padding-left: 18px }
.m-unmet small { color: var(--ink-2) }
.m-lower { padding: 10px 14px; border-radius: 14px; background: var(--warn-soft); border-left: 4px solid var(--sun); font-size: 14.5px; line-height: 1.45 }
.m-lower b { color: var(--warn) }
.m-lower ul { margin: 4px 0 0; padding-left: 18px }

/* "Why this fits": one disclosure holds all the reasoning */
.m-why-t { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer }
.m-why-l { font-weight: 700; font-size: 15px }
.m-why-h { color: var(--ink-2); font-size: 13.5px; font-weight: 500 }
.m-why-t .m-chev { margin-left: auto }
.m-why-t[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft) }
.m-why-t:focus-visible, .m-fb-opt:focus-visible, .m-msg-head:focus-visible, .m-msg-job:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.m-chev { flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s }
[aria-expanded="true"] > .m-chev { transform: translateY(2px) rotate(-135deg) }
.m-why-body { display: grid; gap: 14px; padding: 2px 2px 0 }
.m-why-body[hidden] { display: none }

.m-sec h4, .m-adv h4 { margin: 0 0 6px; font: 700 12px/1.3 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2) }
.m-sec p, .m-adv p { margin: 0; line-height: 1.5; font-size: 15.5px }
.m-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5 }
.m-ev { list-style: none; padding-left: 0 !important; gap: 10px !important }
.m-ev li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--accent) }
.m-ev q { color: var(--ink-2); font-size: 14px }
.m-ev small { color: var(--muted); font-size: 12.5px }
.m-gaps li::marker { color: var(--warn) }
.m-adv { padding: 10px 14px; border-radius: 14px; background: var(--accent-soft) }
.m-adv h4 { color: var(--accent-deep) }
.m-more { justify-self: start; font-size: 14.5px; min-height: 44px }
.m-full { display: grid; gap: 14px }
.m-full[hidden] { display: none }
.m-comp { margin: 0; display: grid; gap: 6px }
.m-comp div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; font-size: 14.5px; padding-bottom: 6px; border-bottom: 1px solid var(--line) }
.m-comp dt small { color: var(--muted) }
.m-comp dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700 }
.m-comp dd.d { grid-column: 1 / -1; font-weight: 400; color: var(--ink-2); font-size: 13.5px }

.m-clarify { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--sun); background: var(--warn-soft) }
.m-q p { margin: 0 0 8px; font-size: 15px; line-height: 1.45 }
.m-clarify .acts { display: flex; flex-wrap: wrap; gap: 8px }
.m-clarify .act { min-height: 44px; white-space: normal; text-align: left }
.m-clarify .note { margin: 0 }
.m-next { margin: 0; display: grid; gap: 2px; font-size: 15px; font-weight: 600; line-height: 1.45 }
.m-next small { font: 700 12px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2) }

/* actions: Save (or Prepare) and Job details side by side, big enough for a thumb; Feedback beneath */
.m-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; padding-top: 4px }
.m-actions .btn, .m-actions .ghost { min-height: 48px; justify-content: center; text-align: center; font-size: 15px; white-space: normal; line-height: 1.2 }
.m-saved { grid-column: 1 / -1; font-weight: 700; color: var(--accent-deep); font-size: 14px }
.m-actions .m-fbtoggle { grid-column: 1 / -1; min-height: 44px; border-color: var(--line); color: var(--ink-2); gap: 10px }
.m-actions .m-fbtoggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }

/* the feedback menu: a full-width list of choices, each a full row */
.m-fb { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line) }
.m-fb[hidden] { display: none }
.m-fb-h { margin: 0; font-weight: 700; font-size: 15px }
.m-fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.m-fb-opt { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface);
  color: var(--ink); font: 600 15px/1.3 var(--f); text-align: left; cursor: pointer }
.m-fb-opt small { font-weight: 500; font-size: 12.5px; color: var(--ink-2) }
.m-fb-opt:active { background: var(--accent-soft) }
.m-fb .note { margin: 0 }
.m-fb-cancel { min-height: 44px; justify-content: center; width: 100% }

/* more cards in a band */
.m-morerow { display: grid; gap: 6px; justify-items: center }
.m-more-btn { width: 100%; min-height: 48px; justify-content: center; font-size: 15px }
.m-morerow .note { margin: 0 }

/* jobs hidden by feedback, each with Undo */
.m-hidden { display: grid; gap: 8px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); min-width: 0; margin-top: 10px }
.m-hidden-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px }
.m-hidden-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(19px, 3vw, 22px) }
.m-hidden-head .linkish { min-height: 44px; padding: 0 2px; font-size: 15px }
.m-hidden > .note, .m-hidden-err { margin: 0 }
.m-hidden-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.m-hidden-list[hidden] { display: none }
.m-hidden-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px; border-radius: 14px; background: var(--bg-2); min-width: 0 }
.m-hidden-list li > div { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere }
.m-hidden-list b { font-size: 15px }
.m-hidden-list span { color: var(--ink-2); font-size: 14px }
.m-hidden-list small { color: var(--muted); font-size: 13px }
.m-hidden-list .ghost { min-height: 44px; min-width: 88px; justify-content: center }

/* the feedback toast, with Undo; sits above the phone's bottom bar */
#m-toast { position: fixed; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 8px 14px 8px 16px; border-radius: 18px; background: var(--ink); color: var(--bg); font-size: 14.5px; line-height: 1.4; opacity: 0; transform: translateY(16px); pointer-events: none; transition: .2s }
#m-toast.show { opacity: 1; transform: none; pointer-events: auto }
#m-toast[hidden] { display: none }   /* closed: out of the tab order and the accessibility tree */
#m-toast span { flex: 1 1 180px; padding: 6px 0 }
#m-toast button { border: 0; background: none; color: var(--sun); font: 700 15px var(--f); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 6px; min-height: 44px }

/* alerts inbox */
.m-inbox { padding: 16px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); display: grid; gap: 12px; min-width: 0 }
.m-inbox[hidden] { display: none }
.m-inbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.m-inbox-head > div { min-width: 0 }
.m-inbox-head h2 { margin: 0; font-size: 22px }
.m-inbox-head p { margin: 4px 0 0; line-height: 1.45 }
.m-inbox-close { flex: none; min-height: 44px; justify-content: center }
.m-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.m-msg { border-radius: 14px; background: var(--bg-2); min-width: 0 }
.m-msg-head { width: 100%; min-height: 56px; display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; border-radius: 14px; background: none; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink) }
.m-msg-head .m-chev { margin: 6px 2px 0 auto; color: var(--ink-2) }
.m-msg-head .dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--line-2) }
.m-msg.unread .dot { background: var(--accent); border-color: var(--accent) }
.m-msg:not(.unread) .m-msg-t b { font-weight: 600 }
.m-msg-t { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: 15px; line-height: 1.4 }
.m-msg-t small { color: var(--ink-2); font-size: 13px }
.m-msg-body { padding: 0 12px 12px }
.m-msg-body[hidden] { display: none }
.m-msg-text { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere }
.m-msg-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.m-msg-job { width: 100%; min-height: 56px; display: grid; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); overflow-wrap: anywhere; line-height: 1.4 }
.m-msg-job b { font-size: 15px }
.m-msg-job:active { border-color: var(--accent) }
.m-msg-job span { color: var(--ink-2); font-size: 14px }
.m-msg-job small { color: var(--accent-deep); font-weight: 600; font-size: 13px }
.m-msg-job .why { color: var(--ink); font-size: 14px }

/* phones: the main bar sits at the bottom, so band headers stick to the top while you scroll a band */
@media (max-width: 760px) {
  .m-intro { margin-top: 0 }
  .m-alerts { width: 100% }
  .m-band > h2 { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin: 0 -16px; padding: 10px 16px 8px;
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
  .mcard { padding: 14px; gap: 10px; border-radius: 18px }
  .mcard.band-top { box-shadow: inset 3px 0 0 var(--sun) }
  .m-id h3 { font-size: 19px }
  .m-score { min-width: 60px; padding: 7px 6px 5px; border-radius: 14px }
  .m-score b { font-size: 24px }
  .m-broader, .m-hidden { border-radius: 18px }
  .m-broader .row .ghost { width: 100%; justify-content: center }
  .m-hidden-list .ghost { flex: 1 1 100% }
  .m-setup .row .btn, .m-setup .row .ghost { flex: 1 1 100%; justify-content: center; min-height: 48px }
}
/* hover only adds emphasis where a pointer can hover; nothing depends on it */
@media (hover: hover) {
  .m-why-t:hover { border-color: var(--accent) }
  .m-fb-opt:hover { border-color: var(--ink) }
  .m-msg-job:hover { border-color: var(--accent) }
  .m-msg-head:hover { background: color-mix(in srgb, var(--ink) 4%, transparent) }
}
@media (min-width: 761px) {
  .mcard { padding: 20px 22px }
  .m-id h3 { font-size: 22px }
  .m-broader { padding: 22px }
  .m-hidden { padding: 18px 22px }
  .m-inbox { padding: 20px 22px }
  /* on a desktop the actions sit in one row and the feedback choices wrap into columns */
  .m-actions { display: flex; flex-wrap: wrap; align-items: center }
  .m-actions .btn, .m-actions .ghost { min-height: 44px; font-size: 14px }
  .m-actions .m-fbtoggle { margin-left: auto }
  .m-fb-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) }
  .m-fb-cancel { width: auto; justify-self: start }
  .m-morerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
  .m-more-btn { width: auto }
  #m-toast { left: 50%; right: auto; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); max-width: 560px }
  #m-toast.show { transform: translate(-50%, 0) }
}
@media (min-width: 1000px) {
  .m-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start }
}
@media (prefers-reduced-motion: reduce) { #m-toast, .m-chev { transition: none } }

/* A question shared by several matches, asked once above the list. */
.m-shared { margin: 12px 0 16px; background: var(--warn-soft); border-color: transparent }
.m-shared h2 { font-size: 17px; margin: 0 0 8px }
.m-shared .m-q + .m-q { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.m-shared .acts .act { min-height: 44px; min-width: 72px }
.m-more-q summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; margin-top: 8px }
.m-chips .m-denom { color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent) }