/* Additions for the Gen+ Media spec form. The base styles.css from the design kit stays unchanged. */
.ti{line-height:1}
.emo{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(230,176,80,.12);border:1px solid rgba(230,176,80,.3)}
.emo .ti{font-size:22px;color:var(--a1)}
.card[aria-checked="true"] .emo{background:rgba(230,176,80,.2);border-color:rgba(255,224,143,.55)}
.chips li .ti{color:var(--a1);font-size:15px;vertical-align:-2px;margin-inline-end:5px}
.important .ic .ti{color:var(--a1);font-size:19px}
.upload .big .ti{color:var(--a1);font-size:30px}
.done-badge .ti{font-size:32px;color:var(--ink)}
.thumb .ti{font-size:22px;color:var(--muted)}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.send-status{font-size:14.5px;line-height:1.5;color:var(--muted);min-height:22px;margin:2px 0 14px}
.send-status.bad{color:#ffb4a1}
#fallback{margin-bottom:18px}
#sendBtn[disabled]{opacity:.6;cursor:progress}
.part-text .field,.part-date .field,.part-textarea .field{margin-bottom:0}

/* ---------- Touch feedback (phone): every control answers the moment a finger lands ---------- */
html{-webkit-tap-highlight-color:transparent}
.btn,.card,.pill,.upload,.sw,.sum-edit,.thumb button{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn,.pill,.upload{position:relative;overflow:hidden}
.card{overflow:hidden}
.orb{will-change:transform}

/* Press: a quick shrink on touch, a slower spring back on release */
.btn{transition:transform .14s var(--ease),opacity .2s,box-shadow .25s var(--ease),filter .2s,background .2s,color .2s}
.btn:active{transform:scale(.96)}
.btn.primary:active{filter:brightness(1.08);box-shadow:0 4px 18px -6px rgba(214,154,50,.85)}
.btn.ghost:active{background:rgba(255,255,255,.1);color:var(--text)}
.card:active{transform:scale(.97)}
.card:not([aria-checked=true]):not([aria-pressed=true]):active{background:#15151f}
.pill{transition:transform .14s var(--ease),background .2s,border-color .2s,color .2s}
.pill:active{transform:scale(.95)}
.upload:active{transform:scale(.985);border-color:var(--a2)}
.sw:active{transform:scale(.9)}
.sw[aria-checked=true]:active{transform:scale(1.04)}
.sum-edit{transition:opacity .15s}
.sum-edit:active{opacity:.5}

/* Gold light that spreads from the exact spot of the touch (added by script.js) */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,224,143,.42) 0%,rgba(255,224,143,.16) 42%,transparent 68%);transform:scale(0);animation:ripple .65s var(--ease) forwards}
.btn.primary .ripple{background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(255,255,255,.17) 42%,transparent 68%)}
@keyframes ripple{60%{opacity:1}to{transform:scale(1);opacity:0}}

/* Start button after a tap: a light sweep and a moving arrow until the first question is on screen */
.btn.primary.is-loading{pointer-events:none;animation:glow 1s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 4px rgba(246,195,92,.2),0 12px 38px -8px rgba(214,154,50,.95)}}
.btn.primary.is-loading::after,#sendBtn.is-sending::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.8) 50%,transparent 72%);transform:translateX(110%);animation:sweep .9s var(--ease) infinite;pointer-events:none}
@keyframes sweep{to{transform:translateX(-110%)}}
.btn.primary.is-loading .arrow{animation:nudge .55s var(--ease) infinite alternate}
@keyframes nudge{to{transform:translateX(-7px)}}

/* Send button while sending: a spinner in place of the arrow */
#sendBtn.is-sending{opacity:1}
#sendBtn.is-sending .arrow{display:none}
#sendBtn.is-sending::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(26,18,4,.25);border-top-color:var(--ink);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* On touch screens a tapped element keeps its hover look; cancel the hover looks there */
@media (hover:none){
  .btn.primary:hover .arrow{transform:none}
  .card:not([aria-checked=true]):not([aria-pressed=true]):hover{border-color:var(--line)}
  .upload:not(.drag):hover{border-color:#3a3a52;background:rgba(255,255,255,.02)}
  .bc-lines a:hover:not(:focus-visible){background:rgba(255,236,190,.035);border-color:rgba(232,190,100,.18)}
}