/* Kingdom Kids: meeting requests (the public form, its thanks page, and the leads' list and request pages).
   Buttons, spacing and the status pill come from ui.css; this file only decides where things go. */

.mt-page { max-width: 44rem; margin-inline: auto; }
.mt-page [hidden], .mt-form [hidden] { display: none !important; }
.mt-head { margin-bottom: var(--s-4); }
.mt-head h1 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; margin-bottom: var(--s-2); }
.mt-head .lead { margin: 0 0 var(--s-4); }

/* The plain promise: a request, not a booking */
.mt-notice { background: var(--yellow-t); border: 2px solid var(--ink); border-left-width: 10px; border-left-color: var(--yellow); border-radius: 12px; padding: var(--s-3) var(--s-4); }
.mt-notice p { margin: 0 0 var(--s-2); }
.mt-notice p:last-child { margin-bottom: 0; }

.mt-form { padding: var(--s-5) var(--s-4); }
@media (min-width: 640px) { .mt-form { padding: var(--s-6); } }

.mt-field { margin: 0 0 var(--s-5); min-width: 0; }
.mt-field > label, .mt-field > legend { display: block; margin: 0 0 var(--s-1); font-weight: 800; }
.mt-field > legend { padding: 0 var(--s-2); }
fieldset.mt-field { border: 2px solid var(--line); border-radius: 12px; padding: var(--s-2) var(--s-4) var(--s-4); margin: 0 0 var(--s-5); }
fieldset.mt-field:focus { outline: none; }
.mt-tag { display: inline-block; margin-left: var(--s-2); padding: .05rem .5rem; border-radius: 999px; background: var(--line); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.mt-hint { margin: var(--s-1) 0 0; font-size: .92rem; color: var(--muted); }
.mt-count { display: block; margin-top: var(--s-1); font-weight: 700; }
.mt-count:empty { display: none; }
.mt-form textarea { display: block; width: 100%; min-height: 6rem; font: inherit; padding: .6rem .75rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); resize: vertical; }
.mt-form select { width: 100%; font: inherit; padding: .6rem .75rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); }
.mt-form input[type=text], .mt-form input[type=email] { width: 100%; }

/* Choices (role, topics): big, easy to tap, one column on a phone */
.mt-choices { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.mt-choices .check { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding: var(--s-2) var(--s-3); min-height: var(--tap); background: var(--white); border: 2px solid var(--line); border-radius: 12px; font-weight: 700; cursor: pointer; }
.mt-choices .check:hover { background: var(--sky-t); }
.mt-choices .check:has(input:checked) { background: var(--yellow-t); border-color: var(--ink); }
.mt-choices .check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.mt-choices .check input { flex: none; }

/* Something to fix */
.mt-summary { margin: 0 0 var(--s-5); }
.mt-summary ul { margin: var(--s-2) 0 0; padding-left: 1.25rem; }
.mt-summary li { margin: var(--s-1) 0; }
.mt-summary a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.mt-summary:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.mt-err { margin: var(--s-1) 0 0; color: #8a2207; font-weight: 800; }
.has-error > input, .has-error > textarea, .has-error > select { border-color: #b3320f; box-shadow: 0 0 0 3px #ffe3d9; }
fieldset.has-error { border-color: #b3320f; }

/* A field only a robot fills in: off the page, out of the tab order, hidden from readers */
.mt-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mt-submit { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 2px dashed var(--line); }
.mt-submit p { margin: 0 0 var(--s-3); }
.mt-promise { font-weight: 700; }
.mt-submit .btn.big { width: 100%; }
@media (min-width: 640px) { .mt-submit .btn.big { width: auto; min-width: 16rem; } }
.mt-privacy { margin-top: var(--s-4) !important; font-size: .95rem; }
.mt-privacy a { padding-block: var(--s-1); }

/* Thanks */
.mt-thanks { margin-top: var(--s-5); }
.mt-thanks .mt-note { background: var(--yellow-t); border-radius: 10px; padding: var(--s-3) var(--s-4); }
.mt-wrapword { overflow-wrap: anywhere; }

/* Leads */
.mt-tools { margin: 0 0 var(--s-4); }
.mt-back { margin: 0 0 var(--s-3); }
.mt-back a, .mt-name { display: inline-flex; align-items: center; min-height: var(--tap); }
.mt-name { font-weight: 800; overflow-wrap: anywhere; }
.mt-table th, .mt-table td { vertical-align: top; }
.mt-table td:nth-child(3) { overflow-wrap: anywhere; }
.mt-table th:nth-child(2), .mt-table td:nth-child(2) { min-width: 9rem; }  /* a name never squeezes into a sliver a finger cannot hit */
.mt-table .status { white-space: nowrap; }  /* a pill stays on one line; a narrow screen scrolls the table inside its box */
.mt-table td:nth-child(1) { white-space: nowrap; }
.mt-sent { font-weight: 700; color: #1b6b3a; }
.mt-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0; }
.mt-dl { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: var(--s-3) var(--s-4); margin: 0; }
.mt-dl dt { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.mt-dl dd { margin: 0; min-width: 0; }
.mt-dl dd p { margin: 0; }
.mt-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-topics { margin: 0; padding-left: 1.25rem; }
@media (max-width: 559px) { .mt-dl { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } .mt-dl dd { margin-bottom: var(--s-3); } }
.card textarea { display: block; width: 100%; min-height: 6rem; font: inherit; padding: .6rem .75rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); resize: vertical; }

/* "Pick a time" (only when BOOKING_URL is set): above the form, with who handles the booking */
.mt-book { margin-top: var(--s-4); padding: var(--s-4); background: var(--sky-t); border: 2px solid var(--ink); border-radius: 12px; }
.mt-book-row { margin: 0 0 var(--s-2); }
.mt-book .btn.big { width: 100%; }
@media (min-width: 640px) { .mt-book .btn.big { width: auto; min-width: 14rem; } }
.mt-booknote { margin: 0; font-size: .95rem; }

/* The privacy page */
.mt-privacy-page .card { margin: 0 0 var(--s-4); }
.mt-privacy-page h2 { margin-top: 0; }
.mt-privacy-page h3 { margin: var(--s-4) 0 var(--s-1); font-size: 1.05rem; }
.mt-privacy-page a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); }