/* The Holden Pricing World — shared styles.
   Base styles are kept inline on elements (copied verbatim from the design);
   this file holds the reset, keyframes, and the :hover/:focus/:active rules
   the design expressed via style-hover / style-focus / style-active. */

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #0F9488; }
a:hover { color: #0b6f66; }
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #9BAAB9; }
textarea { resize: none; }

/* keyframes (from Submit + Board specs) */
@keyframes hpwDraw { to { stroke-dashoffset: 0; } }
@keyframes hpwPop { 0% { transform: scale(.55); opacity: 0; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes hpwRing { 0% { transform: scale(.7); opacity: .45; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes hpwShake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
@keyframes hpwRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hpwIn { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes hpwPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .35; } }

/* ---- Submit screen -------------------------------------------------------- */
.submit-page::-webkit-scrollbar { width: 0; height: 0; }
.hpw-initials:focus { border-color: #D9A441; box-shadow: 0 0 0 4px rgba(217,164,65,.16); }
.hpw-field:focus { border-color: #0F9488; background: #fff; box-shadow: 0 0 0 4px rgba(15,148,136,.12); }
.hpw-cta:hover { filter: brightness(1.03); box-shadow: 0 16px 26px -8px rgba(217,164,65,.7); transform: translateY(-1px); }
.hpw-cta:active { transform: translateY(1px) scale(.99); }
.hpw-again:hover { box-shadow: 0 16px 26px -10px rgba(20,35,58,.65); transform: translateY(-1px); }
.hpw-again:active { transform: translateY(1px) scale(.99); }
.shake { animation: hpwShake .5s; }

/* ---- Board screen --------------------------------------------------------- */
.hpw-canvas ::-webkit-scrollbar { width: 6px; height: 6px; }
.hpw-canvas ::-webkit-scrollbar-thumb { background: rgba(20,35,58,.16); border-radius: 6px; }
.hpw-presenter:hover { background: rgba(255,255,255,.08); color: #fff; }
.hpw-export:hover { filter: brightness(1.04); transform: translateY(-1px); }
.hpw-del:hover { opacity: 1 !important; background: rgba(20,35,58,.06); color: #C0392B !important; }
.hpw-mini:hover { box-shadow: 0 5px 12px -3px rgba(20,35,58,.16); transform: translateY(-1px); }
.hpw-tray:hover { box-shadow: 0 12px 24px -8px rgba(20,35,58,.3); transform: translateY(-2px); }
.hpw-add:hover { border-color: #0F9488; color: #0F9488; background: #fff; transform: translateY(-1px); }
.hpw-exit:hover { opacity: 1 !important; background: #fff; color: #14233A; }

/* custom card-color picker (native color input styled as a round swatch) */
.hpw-colorpick { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; padding: 0; border: 1.5px solid rgba(20,35,58,.2); border-radius: 50%; background: none; cursor: pointer; }
.hpw-colorpick::-webkit-color-swatch-wrapper { padding: 0; }
.hpw-colorpick::-webkit-color-swatch { border: none; border-radius: 50%; }
.hpw-colorpick::-moz-color-swatch { border: none; border-radius: 50%; }