/* =====================================================================================================================
   PENDLE PERFORMANCE 2026 - SEND US A QUESTION (parts/ask.php): the Contact page's first screen + the question sheet.
   Scoped (.ak-*, .cx-sheet--ask, .ak-sec). Reads tokens.css only; the keys, glass, plate and sheet are components.css's own.
   Phone first (390x844): every box 16 px text (iPhone never zooms), 52 px tall, a 44 px tap area at the least; the sheet
   scrolls on its own above the keyboard. Nothing moves except the sheet rising (components.css, reduced motion = still).
   ===================================================================================================================== */

/* ---------- the screen: the bottom line carries the card + the two keys (Book online first) ---------- */
.ak-sec .cx-lede{max-width:31em}
.ak-foot{gap:12px 16px}
.ak-card{display:grid;gap:4px;width:100%;max-width:560px;padding:14px 18px}
.ak-card p{margin:0}
.ak-card__k{display:flex;align-items:center;gap:8px;font:700 12px/16px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.ak-card__k svg{width:16px;height:16px;color:var(--cyan)}
.ak-card__t{font:400 15px/1.45 var(--f-text);color:var(--body)}
@media (max-width:699px){
  .ak-card{display:none}                                  /* a phone: the two keys say it; the words are in the lede */
  .ak-foot>.cx-key{flex:1 1 100%}
}
@media (min-width:1200px){.ak-card{padding:18px 24px}.ak-card__t{font-size:16px}}
@media (min-width:1800px) and (min-height:1000px){.ak-card{max-width:640px}}

/* ---------- the sheet ---------- */
.cx-sheet--ask .cx-sheet__panel{gap:14px}
@media (min-width:900px){.cx-sheet--ask .cx-sheet__panel{width:min(640px,calc(100vw - 96px))}}
.ak-form,.ak-done,.ak-off{display:grid;gap:16px;width:100%;margin:0}   /* the panel's own edges = the title's edge, every size */
.ak-form[hidden],.ak-done[hidden],.ak-off[hidden]{display:none}
.ak-intro{margin:0;font:400 16px/1.5 var(--f-text);color:var(--body)}
.ak-msg{margin:0;padding:12px 14px;border-radius:12px;font:700 15px/1.45 var(--f-ui);color:#fff;
  background:rgba(240,90,90,.14);box-shadow:inset 0 0 0 1px rgba(255,140,140,.45)}
.ak-msg.is-info{background:rgba(var(--cyan-rgb),.12);box-shadow:inset 0 0 0 1px rgba(127,217,255,.45)}
.ak-msg[hidden]{display:none}
.ak-field{display:grid;gap:6px;min-width:0}
.ak-label{font:700 15px/1.3 var(--f-ui);color:#fff}
.ak-opt{font-weight:400;color:var(--muted)}
.ak-help{margin:-2px 0 2px;font:400 14px/1.4 var(--f-text);color:#b9c7d6}
.ak-input{display:block;width:100%;min-height:52px;margin:0;padding:13px 14px;border:0;border-radius:12px;outline:none;-webkit-appearance:none;appearance:none;
  font:400 16px/1.4 var(--f-text);color:#fff;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 2px 4px rgba(0,0,0,.35);transition:box-shadow var(--t-colour) ease,background-color var(--t-colour) ease}
.ak-input::placeholder{color:rgba(214,226,240,.38)}
.ak-input:focus{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(127,217,255,.9),0 0 0 3px rgba(127,217,255,.28)}
.ak-text{min-height:140px;resize:vertical}
.ak-field.is-bad .ak-input{box-shadow:inset 0 0 0 1px rgba(255,140,140,.9),0 0 0 3px rgba(255,120,120,.18)}
.ak-field.is-bad .ak-plate{box-shadow:inset 0 0 0 2px #1a1a1a,inset 0 0 0 3px rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.55),0 0 0 3px rgba(255,120,120,.7)}
.ak-plate{height:56px}
.ak-plate input{font-size:30px}
.ak-err{margin:0;font:700 14px/1.4 var(--f-ui);color:#ffb3b3}
.ak-err[hidden]{display:none}
.ak-count{margin:-2px 2px 0;text-align:right;font:400 13px/1 var(--f-text);color:var(--muted);font-variant-numeric:tabular-nums}
.ak-send{min-height:54px;font-size:17px}
.ak-send[aria-busy="true"]{opacity:.75;cursor:progress}
.ak-small{margin:0;font:400 13px/1.5 var(--f-text);color:#a7b5c5;text-align:center}
.ak-small a{color:#c4d1df}
/* the honeypot: off screen for people, still in the form for scripts */
.ak-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- sent ---------- */
.ak-done,.ak-off{padding:18px 0 4px;text-align:center;outline:none}
.ak-done p,.ak-off p{margin:0}
.ak-done__tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto!important;border-radius:50%;background:var(--cyan);color:var(--on-cyan);
  box-shadow:0 0 0 6px rgba(var(--cyan-rgb),.18),0 10px 32px rgba(var(--cyan-rgb),.35)}
.ak-done__tick svg{width:34px;height:34px;stroke-width:3}
.ak-done__t{font:400 34px/1.05 var(--f-display);letter-spacing:.02em;color:#fff}
.ak-done__s{font:400 16px/1.5 var(--f-text);color:var(--body)}