/* Matchmaking shared styles: dark form card, toggle controls, directory cards.
   Depends on the site tokens (--green, --lime, --ink, --fd, --fb) defined per page. */

.mm-panel { background: var(--green); border-radius: 20px; padding: 48px; color: #fff; }
@media (max-width: 640px) { .mm-panel { padding: 30px 20px; } }
.mm-panel .section-eyebrow { color: var(--lime); }
.mm-panel .section-eyebrow::after { background: var(--lime); }
.mm-panel h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 14px 0 10px; }
.mm-panel .mm-lead { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.6; margin-bottom: 30px; }

.mm-fields { display: grid; gap: 22px; }
.mm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .mm-row2 { grid-template-columns: 1fr; } }
.mm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mm-field { border: 0; padding: 0; min-width: 0; }
.mm-field > label, .mm-field > legend, .mm-field > .mm-label {
  display: block; font-family: var(--fd); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  font-size: 13px; color: rgba(255,255,255,.82); margin-bottom: 9px;
}
.mm-field > legend { padding: 0; }
.mm-req { color: var(--lime); }
.mm-legend-hint { text-transform: none; letter-spacing: 0; font-family: var(--fb); font-weight: 500; color: rgba(255,255,255,.7); font-size: 12px; }
.mm-field input[type=text], .mm-field input[type=email], .mm-field input[type=tel], .mm-field input[type=password], .mm-field select, .mm-field textarea {
  width: 100%; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); border-radius: 8px;
  padding: 13px 15px; color: #fff; font-family: var(--fb); font-size: 15px; transition: border-color .15s;
  -webkit-appearance: none; appearance: none;
}
.mm-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23f5ca62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.mm-field select option { color: var(--ink); background: #fff; }
.mm-field input::placeholder, .mm-field textarea::placeholder { color: rgba(255,255,255,.58); }
.mm-field input:focus, .mm-field select:focus, .mm-field textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(245,202,98,.25); }
.mm-field input[readonly] { opacity: .6; }
.mm-field textarea { resize: vertical; min-height: 96px; }
.mm-hint { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 7px; }
.mm-err { color: #F2B57A; font-size: 13.5px; margin-top: 7px; display: none; font-weight: 500; }
.mm-err.show { display: block; }
.mm-field.bad input, .mm-field.bad select, .mm-field.bad textarea { border-color: #E88A4A; }
.mm-field.bad .mm-toggle-label { border-color: rgba(232,138,74,.6); }

/* Toggle buttons: real checkbox/radio inputs, visually styled */
.mm-toggles { display: grid; gap: 8px; }
.mm-toggles-2 { grid-template-columns: repeat(2, 1fr); }
.mm-toggles-3 { grid-template-columns: repeat(3, 1fr); }
.mm-toggles-7 { grid-template-columns: repeat(7, 1fr); }
.mm-toggles-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .mm-toggles-7 { grid-template-columns: repeat(4, 1fr); } .mm-toggles-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .mm-toggles-3 { grid-template-columns: 1fr 1fr; } .mm-toggles-cards { grid-template-columns: 1fr; } }
.mm-toggle { position: relative; display: block; cursor: pointer; }
.mm-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mm-toggle-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; padding: 10px 8px;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.06);
  font-family: var(--fd); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: rgba(255,255,255,.85);
  text-align: center; transition: background .15s, border-color .15s, color .15s; user-select: none;
}
.mm-toggle-label small { font-family: var(--fb); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: rgba(255,255,255,.55); }
.mm-toggle-card .mm-toggle-label { min-height: 62px; }
.mm-toggle:hover .mm-toggle-label { border-color: rgba(255,255,255,.45); }
.mm-toggle input:checked + .mm-toggle-label { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.mm-toggle input:checked + .mm-toggle-label small { color: rgba(12,26,17,.65); }
.mm-toggle input:focus-visible + .mm-toggle-label { outline: 3px solid #fff; outline-offset: 2px; }

/* Visibility radio cards */
.mm-vis-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .mm-vis-options { grid-template-columns: 1fr; } }
.mm-vis { position: relative; display: block; cursor: pointer; }
.mm-vis input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mm-vis-body { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 16px 48px; border: 1.5px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.06); min-height: 100%; transition: border-color .15s, background .15s; }
.mm-vis-body::before { content: ""; position: absolute; left: 17px; top: 19px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); transition: all .15s; }
.mm-vis-body strong { font-family: var(--fd); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; color: #fff; }
.mm-vis-body span { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); }
.mm-vis:hover .mm-vis-body { border-color: rgba(255,255,255,.45); }
.mm-vis input:checked + .mm-vis-body { border-color: var(--lime); background: rgba(245,202,98,.1); }
.mm-vis input:checked + .mm-vis-body::before { border-color: var(--lime); background: var(--lime); box-shadow: inset 0 0 0 4px var(--green); }
.mm-vis input:focus-visible + .mm-vis-body { outline: 3px solid #fff; outline-offset: 2px; }
.mm-public-opts { display: grid; gap: 20px; margin-top: 18px; padding: 20px; border-left: 4px solid var(--lime); background: rgba(255,255,255,.05); border-radius: 0 10px 10px 0; }
.mm-public-opts[hidden] { display: none; }

.mm-field > .mm-check, .mm-check {
  display: flex; align-items: flex-start; gap: 10px; min-height: 48px; margin: 0;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18); border-radius: 10px; padding: 14px 18px;
  cursor: pointer; font-family: var(--fb); font-weight: 500; font-size: 14.5px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.9);
}
/* Center the 19px box on the first 1.5em line of label text so wrapped lines indent under the text, not the box */
.mm-check input { flex: none; width: 19px; height: 19px; margin: calc((1.5em - 19px) / 2) 0 0; accent-color: var(--lime); cursor: pointer; }
.mm-check input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mm-check > span { flex: 1; min-width: 0; }
.mm-field[data-field="age_confirmed"] { margin-top: 10px; }

.mm-actions { margin-top: 30px; }
.mm-submit { width: 100%; background: var(--lime); color: var(--ink); border: none; border-radius: 100px; padding: 17px; font-family: var(--fb); font-weight: 700; letter-spacing: .04em; font-size: 16px; cursor: pointer; transition: background .15s, transform .1s; }
.mm-submit:hover { background: var(--lime-2); }
.mm-submit:active { transform: scale(.99); }
.mm-submit:disabled { opacity: .55; cursor: not-allowed; }
.mm-submit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mm-formhint { text-align: center; margin-top: 15px; font-size: 13px; color: rgba(255,255,255,.7); }
.mm-formhint a { color: var(--lime); text-decoration: underline; }
.mm-status { margin-top: 20px; padding: 16px 18px; border-radius: 10px; font-size: 15px; display: none; font-weight: 500; line-height: 1.55; }
.mm-status.ok { display: block; background: rgba(245,202,98,.15); border: 1.5px solid var(--lime); color: #fff; }
.mm-status.fail { display: block; background: rgba(232,138,74,.15); border: 1.5px solid #E88A4A; color: #F2B57A; }
.mm-status a { color: var(--lime); text-decoration: underline; word-break: break-all; }
.mm-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.35); color: #fff; border-radius: 100px; padding: 12px 22px; font-family: var(--fb); font-weight: 600; font-size: 14px; cursor: pointer; }
.mm-btn-ghost:hover { border-color: #fff; }
.mm-btn-danger { background: transparent; border: 1.5px solid #E88A4A; color: #F2B57A; border-radius: 100px; padding: 12px 22px; font-family: var(--fb); font-weight: 600; font-size: 14px; cursor: pointer; }
.mm-btn-danger:hover { background: rgba(232,138,74,.15); }

/* Directory */
.dir-controls { display: grid; grid-template-columns: 2fr repeat(4, 1fr) 1fr; gap: 10px; margin-bottom: 24px; }
@media (max-width: 1000px) { .dir-controls { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .dir-controls { grid-template-columns: 1fr 1fr; } .dir-controls .dir-search { grid-column: span 2; } }
.dir-controls label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 5px; }
.dir-controls input, .dir-controls select { width: 100%; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--fb); font-size: 14px; color: var(--ink); background: #fff; }
.dir-controls input:focus, .dir-controls select:focus { outline: 3px solid var(--lime); outline-offset: 1px; border-color: var(--green); }
.dir-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-60); margin-bottom: 8px; }
.dir-meta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .dir-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dir-grid { grid-template-columns: 1fr; } }
.dir-card { background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s, box-shadow .15s; }
.dir-card:hover { border-color: var(--lime); box-shadow: 0 10px 28px rgba(14,67,96,.10); }
/* Long names wrap instead of widening the card past the viewport */
.dir-card { min-width: 0; }
.dir-card-head > div { min-width: 0; }
.dir-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dir-card h3 { overflow-wrap: anywhere;  font-family: var(--fd); font-weight: 800; text-transform: uppercase; font-size: 22px; letter-spacing: .01em; color: var(--ink); line-height: 1.05; }
.dir-skill { flex: none; font-family: var(--fd); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; background: var(--green); color: #fff; padding: 5px 10px; border-radius: 100px; white-space: nowrap; }
.dir-dupr { font-size: 13px; color: var(--ink-60); font-weight: 600; }
.dir-row { font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.dir-row b { flex: none; font-family: var(--fd); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--ink-60); width: 56px; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dir-chip { font-size: 12px; font-weight: 600; background: var(--off); border: 1px solid var(--border); border-radius: 100px; padding: 3px 9px; color: var(--ink); }
.dir-note { font-size: 13.5px; color: var(--ink-60); line-height: 1.5; font-style: italic; }
.dir-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dir-ig { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 14px 6px 12px; border-radius: 100px; background: var(--off); border: 1px solid var(--border); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.dir-ig:hover { border-color: var(--green); color: var(--green); }
.dir-ig:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.dir-contact-btn { background: var(--lime); color: var(--ink); border: none; border-radius: 100px; min-height: 44px; padding: 10px 20px; font-family: var(--fb); font-weight: 700; font-size: 13px; cursor: pointer; }
.dir-contact-btn:hover { background: var(--lime-2); }
.dir-contact-btn:focus-visible, .dir-report:focus-visible, .dir-more:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.dir-contact { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.dir-contact a { color: var(--green); text-decoration: underline; font-weight: 600; word-break: break-all; }
.dir-report { background: none; border: none; font-family: var(--fb); font-size: 12.5px; color: var(--ink-60); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 44px; padding: 0 4px; }
.dir-report:hover { color: var(--ink); }
.dir-empty { text-align: center; padding: 56px 20px; background: var(--off); border-radius: 16px; color: var(--ink-60); font-size: 16px; }
.dir-empty a { color: var(--green); font-weight: 600; text-decoration: underline; }
.dir-more { display: block; margin: 28px auto 0; background: transparent; border: 1.5px solid var(--border); color: var(--ink); border-radius: 100px; padding: 13px 28px; font-family: var(--fb); font-weight: 600; font-size: 14px; cursor: pointer; }
.dir-more:hover { border-color: var(--green); }
.dir-more[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mm-toggle-label, .mm-vis-body, .dir-card, .mm-submit, .mm-field input, .mm-field select, .mm-field textarea { transition: none !important; }
}