.hhp-planner {
	--hhp-primary: #0757a6;
	--hhp-secondary: #fff;
	--hhp-ink: #142033;
	--hhp-muted: #617085;
	--hhp-border: #dbe3ee;
	--hhp-soft: #f3f7fb;
	--hhp-success: #14804a;
	--hhp-danger: #b42318;
	box-sizing: border-box;
	color: var(--hhp-ink);
	font-size: 16px;
	line-height: 1.5;
	margin: 2rem 0;
}

.hhp-planner *, .hhp-planner *::before, .hhp-planner *::after { box-sizing: inherit; }
.hhp-planner h2, .hhp-planner h3 { color: var(--hhp-primary); line-height: 1.2; }
.hhp-event-facts { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0 2rem; }
.hhp-event-facts > div { background: var(--hhp-primary); border-radius: 12px; color: var(--hhp-secondary); padding: 1rem 1.1rem; }
.hhp-event-facts span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; opacity: .8; text-transform: uppercase; }
.hhp-event-facts strong { display: block; font-size: .98rem; margin-top: .25rem; }
.hhp-notice { background: #f8fafc; border: 1px solid var(--hhp-border); border-left: 5px solid var(--hhp-primary); border-radius: 8px; margin: 1rem 0; padding: .8rem 1rem; }
.hhp-notice ul { margin: 0; padding-left: 1.2rem; }
.hhp-notice-success { background: #ecfdf3; border-color: #abefc6; border-left-color: var(--hhp-success); }
.hhp-notice-error { background: #fef3f2; border-color: #fecdca; border-left-color: var(--hhp-danger); }
.hhp-shift-groups { display: grid; gap: 1.2rem; }
.hhp-shift-group { border: 1px solid var(--hhp-border); border-radius: 14px; margin: 0; min-width: 0; padding: 1rem; }
.hhp-shift-group legend { color: var(--hhp-primary); font-size: 1.05rem; font-weight: 800; padding: 0 .45rem; }
.hhp-shift-options { display: grid; gap: .75rem; }
.hhp-shift-card { align-items: center; background: #fff; border: 2px solid var(--hhp-border); border-radius: 10px; cursor: pointer; display: grid; gap: .8rem; grid-template-columns: 24px minmax(0,1fr) auto; padding: .85rem; transition: border-color .15s, box-shadow .15s, background .15s; }
.hhp-shift-card:hover { border-color: var(--hhp-primary); box-shadow: 0 4px 16px rgba(7,87,166,.1); }
.hhp-shift-card:has(input:checked) { background: #eef6ff; border-color: var(--hhp-primary); }
.hhp-shift-card:has(input:focus-visible) { outline: 3px solid rgba(7,87,166,.25); outline-offset: 2px; }
.hhp-shift-card input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.hhp-check { border: 2px solid #93a4b8; border-radius: 5px; height: 22px; position: relative; width: 22px; }
.hhp-shift-card input:checked + .hhp-check { background: var(--hhp-primary); border-color: var(--hhp-primary); }
.hhp-shift-card input:checked + .hhp-check::after { border: solid #fff; border-width: 0 2px 2px 0; content: ''; height: 10px; left: 7px; position: absolute; top: 3px; transform: rotate(45deg); width: 5px; }
.hhp-shift-main { display: flex; flex-direction: column; min-width: 0; }
.hhp-shift-main strong { color: var(--hhp-ink); }
.hhp-shift-main small { color: var(--hhp-muted); font-size: .78rem; margin-top: .2rem; }
.hhp-availability { background: #e8f3ff; border-radius: 999px; color: var(--hhp-primary); font-size: .78rem; font-weight: 800; padding: .3rem .65rem; white-space: nowrap; }
.hhp-shift-card.is-full { background: #f5f6f7; cursor: not-allowed; opacity: .68; }
.hhp-shift-card.is-full .hhp-availability { background: #e7e8ea; color: #5f6368; }
.hhp-shift-card.is-incompatible { display: none; }
.hhp-person { background: var(--hhp-soft); border-radius: 14px; margin-top: 1.5rem; padding: 1.25rem; }
.hhp-person h3 { margin-top: 0; }
.hhp-radio-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.hhp-radio-row label, .hhp-consent { align-items: flex-start; cursor: pointer; display: flex; gap: .5rem; }
.hhp-radio-row input, .hhp-consent input { flex: 0 0 auto; margin-top: .3rem; }
.hhp-fields { display: grid; gap: .5rem 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.hhp-fields p { margin: .35rem 0; }
.hhp-fields label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .3rem; }
.hhp-fields input, .hhp-fields select, .hhp-fields textarea { background: #fff; border: 1px solid #aebccc; border-radius: 7px; color: var(--hhp-ink); font: inherit; padding: .65rem .7rem; width: 100%; }
.hhp-fields input:focus, .hhp-fields select:focus, .hhp-fields textarea:focus { border-color: var(--hhp-primary); box-shadow: 0 0 0 3px rgba(7,87,166,.15); outline: 0; }
.hhp-fields small { color: var(--hhp-muted); display: block; font-size: .78rem; margin-top: .25rem; }
.hhp-span-2 { grid-column: 1 / -1; }
.hhp-consent { font-size: .9rem; margin-top: 1rem; }
.hhp-submit { appearance: none; background: var(--hhp-primary); border: 0; border-radius: 9px; color: var(--hhp-secondary); cursor: pointer; font: inherit; font-weight: 800; margin-top: 1.25rem; padding: .85rem 1.2rem; }
.hhp-submit:hover, .hhp-submit:focus { filter: brightness(.9); }
.hhp-submit-danger { background: var(--hhp-danger); margin-right: .75rem; }
.hhp-form-note { color: var(--hhp-muted); font-size: .82rem; margin-bottom: 0; }
.hhp-honeypot { height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px; }
.hhp-cancel ul { margin-bottom: 1rem; }

@media (max-width: 760px) {
	.hhp-event-facts, .hhp-fields { grid-template-columns: 1fr; }
	.hhp-span-2 { grid-column: auto; }
	.hhp-shift-card { align-items: start; grid-template-columns: 24px minmax(0,1fr); }
	.hhp-availability { grid-column: 2; justify-self: start; }
	.hhp-person { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) { .hhp-shift-card { transition: none; } }