/* Easy-to-use layer for every visitor, whatever their age or comfort with phones. Pairs with /js/easy.js, which adds
   the "Tap here to…" lines and "Tap one below" prompts styled here. Also makes every button big enough to hit with a
   thumb, shows a clear outline around whatever the keyboard is on, and underlines text links so they read as links. */

/* "Tap here to…" line inside a button or tappable box */
.ez-hint{display:block;margin-top:6px;font:700 13.5px/1.35 Arial,sans-serif;letter-spacing:0;text-transform:none;font-style:normal;white-space:normal;text-align:inherit;text-shadow:none;opacity:.9}
.ez-has{flex-wrap:wrap}
.ez-has>.ez-hint{flex-basis:100%;grid-column:1/-1}
.ez-has:not(.btn)>.ez-hint{width:fit-content;max-width:100%;margin-top:10px;padding:5px 11px;border-radius:20px;background:#d9b96f2e;border:1px solid #d9b96f66;opacity:1}
.ez-mid>.ez-hint{margin-inline:auto;text-align:center}
.btn.ez-has{text-align:center}
.btn.ez-has>.ez-hint{margin-top:4px;font-size:12.5px;font-weight:600}

/* "Tap one below" prompt above a group of choices */
.ez-lead{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:14px 0 12px;padding:9px 15px;border-radius:14px;border:1px dashed #b8913f;background:#d9b96f26;color:inherit;font:700 15px/1.4 Arial,sans-serif;letter-spacing:0;text-transform:none;text-align:left}
.ez-lead i{flex:none;font-style:normal;font-size:18px;animation:ez-nudge 1.6s ease-in-out infinite}
@keyframes ez-nudge{50%{transform:translateY(4px)}}
.ez-lead.ez-mid{margin-inline:auto}
/* Inside a two-column choice group the prompt spans both columns and keeps its own look */
fieldset>.ez-lead{grid-column:1/-1}
.bk-kind .ez-lead span{display:inline;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.bk-kind .ez-lead i{display:inline;width:auto;height:auto;border-radius:0;background:none;font-size:18px}
.sits+.ez-lead,.ez-lead+.sits{margin-top:28px}

/* Card flip-back control reads as words, not just an arrow */
.b-flip.ez-word{width:auto;height:auto;min-height:40px;padding:0 14px;border-radius:22px;font:700 14px Arial,sans-serif}.b-flip.ez-word:hover{transform:none}

/* A clear, thick outline around whatever is selected by keyboard or switch control */
:is(a,button,input,select,textarea,summary,label,[tabindex]):focus-visible{outline:3px solid #f3dc9e;outline-offset:3px;box-shadow:0 0 0 6px #000a}

/* With a mouse, anything that can be clicked lights up with a gold ring as the pointer moves over it, so visitors can
   see what is clickable (calendar days, date boxes, choices, buttons, links) before they click */
@media(hover:hover){
  :is(a[href],button:not(:disabled),select:not(:disabled),summary,[role=button],[role=tab],input:is([type=date],[type=file],[type=range]):not(:disabled)){cursor:pointer}
  :is(a[href],button:not(:disabled),select:not(:disabled),summary,[role=button],[role=tab],input[type=date]:not(:disabled)):hover,
  label:has(>input:is([type=radio],[type=checkbox]):not(:disabled)):hover>span:not(.ez-hint){outline:2px solid #f3dc9ecc;outline-offset:2px}
  label:has(>input:is([type=radio],[type=checkbox]):not(:disabled)){cursor:pointer}
  /* Links inside sentences get a soft gold highlight instead of a ring */
  :is(p,li,.fine,small) a:not([class]):hover{outline:none;background:#d9b96f40;border-radius:4px}
}

/* Text links inside sentences are underlined so they look tappable */
:is(p,li,.fine,small) a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* Thumb-sized targets on phones and tablets (at least 48px tall) */
@media(pointer:coarse){
  .btn,.sec-edit,.g-reset,.g-pg,.link-btn,.ctrl button,[role=tab],select,input:not([type=checkbox],[type=radio],[type=range],[type=hidden]){min-height:48px}
  .g-nav,.rn-prev,.rn-next,.lot-nav,.x,.rn-x,.intro-x{min-width:48px;min-height:48px}
  .b-flip{min-width:44px;min-height:44px}
  input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}
}

@media(prefers-reduced-motion:reduce){.ez-lead i{animation:none}}