/* DevHost reload marker: 2026-10-09 */
* { box-sizing: border-box; }
:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17212b; background: #f5f7f8; }
body { margin: 0; min-width: 0; line-height: 1.5; }
a { color: #075e54; font-weight: 650; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ef8b2c; outline-offset: 3px; }
.site-header { background: #fff; border-bottom: 1px solid #d7e0e3; }
.site-nav, .page-content { width: min(100% - 2rem, 42rem); margin: 0 auto; }
.site-nav { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { color: #123b45; font-size: 1.1rem; text-decoration: none; }
.nav-actions, .action-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-actions form { margin: 0; }
.button-link { border: 0; background: none; color: #075e54; font: inherit; font-weight: 650; padding: .65rem 0; text-decoration: underline; cursor: pointer; }
.page-content { padding-block: 2rem 3rem; }
h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.15; margin: .15rem 0 1rem; color: #123b45; }
h2 { font-size: 1.25rem; line-height: 1.25; }
.eyebrow, .panel-label { color: #52646c; font-weight: 750; font-size: .88rem; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.period-panel, .auth-card, .confirmation { background: #e6f3f0; border: 1px solid #b9d9d1; border-radius: .8rem; padding: 1.25rem; margin: 1.5rem 0; }
.period-panel h2 { margin: .35rem 0; }
.button, button[type="submit"] { display: inline-block; background: #075e54; color: #fff; border: 2px solid #075e54; border-radius: .45rem; font: inherit; font-weight: 750; padding: .75rem 1rem; min-height: 2.8rem; text-decoration: none; cursor: pointer; }
button[disabled] { opacity: .72; cursor: progress; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.reference-list { list-style: none; padding: 0; margin: .75rem 0; border-top: 1px solid #d7e0e3; }
.reference-list li { border-bottom: 1px solid #d7e0e3; padding: .9rem 0; overflow-wrap: anywhere; }
.reference-list span { color: #52646c; display: block; font-size: .92rem; }
.empty-state { color: #52646c; }
.stack-form { margin-top: 1.5rem; }
.field { margin-bottom: 1.2rem; }
.field > label { display: block; font-weight: 700; margin-bottom: .35rem; }
input, select { background: #fff; border: 1px solid #71818a; border-radius: .35rem; color: inherit; font: inherit; min-height: 2.8rem; padding: .55rem .65rem; width: 100%; }
.checkbox-field { display: flex; align-items: center; gap: .6rem; }
.checkbox-field input { height: 1.25rem; min-height: 1.25rem; width: 1.25rem; }
.checkbox-field label { margin: 0; }
.help-text, .privacy-note { color: #45565f; font-size: .92rem; margin: .35rem 0 0; }
.privacy-note { background: #fff5de; border-left: 4px solid #c66a00; padding: .75rem; }
.form-errors, .field-error { background: #fff0f0; border-left: 4px solid #ad1d2d; color: #75111c; margin: .5rem 0; padding: .7rem; }
.errorlist { margin: 0; padding-left: 1.1rem; }
.confirmation-code { background: #fff; border-radius: .45rem; padding: .85rem; overflow-wrap: anywhere; }
.confirmation-code span { display: block; color: #52646c; font-size: .9rem; }
.confirmation-code strong { font-size: 1.15rem; }
@media (max-width: 380px) { .site-nav, .page-content { width: min(100% - 1.25rem, 42rem); } .site-nav { align-items: flex-start; padding-block: .75rem; } .nav-actions { gap: .65rem; } }

.account-lookup { margin-top: 1.5rem; }
#account-lookup-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem; margin-top: .75rem; }
#account-lookup-results button { background: #fff; border: 2px solid #075e54; border-radius: .45rem; color: #075e54; cursor: pointer; font: inherit; font-weight: 750; min-height: 3rem; padding: .7rem 1rem; }
#account-lookup-results button:hover { background: #d8eee9; }

.participant-home, .participant-zone { min-width: 0; }
.zone-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin: 1.5rem 0; }
.zone-card, .zone-link { border: 2px solid #075e54; border-radius: .6rem; color: #075e54; min-height: 4.5rem; padding: .9rem 1rem; text-decoration: none; }
.zone-card { display: flex; flex-direction: column; justify-content: center; }
.zone-card strong { font-size: 1.2rem; }
.zone-card span { color: #45565f; font-size: .92rem; font-weight: 400; }
.zone-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.25rem 0; }
.zone-controls .button { grid-column: 1 / -1; text-align: center; min-height: 3.25rem; padding-block: .85rem; }
.zone-link { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 3.25rem; text-align: center; }
.zone-link.current { background: #d8eee9; }
.history-link span { font-size: 1.25rem; line-height: 1; }
.zone-list .action-group { margin-top: .7rem; }
.zone-list form { margin: 0; }
@media (min-width: 32rem) { .zone-grid { grid-template-columns: repeat(3, 1fr); } .zone-controls { display: flex; align-items: stretch; } .zone-controls .button { flex: 1; } .zone-link { flex: 1; } }
.zone-controls { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.25rem 0; }
.zone-controls > * { min-width: 0; text-align: center; }
.zone-link { align-items: center; border: 1px solid #71818a; border-radius: .45rem; display: flex; font-weight: 750; justify-content: center; min-height: 2.8rem; padding: .6rem; text-decoration: none; }
.zone-link.current { background: #e6f3f0; border-color: #075e54; color: #123b45; }
.empty-state-panel { align-items: flex-start; background: #e6f3f0; border: 1px solid #b9d9d1; border-radius: .8rem; display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; padding: 1.25rem; }
.empty-state-panel strong { color: #123b45; }
@media (max-width: 34rem) { .zone-controls { grid-template-columns: 1fr; } }

/* Participant zones: colour accents supplement their text labels. */
.zone-reference, .zone-card[data-zone-identity="reference"] { --zone-accent: #087f78; --zone-tint: #e0f3ef; --zone-border: #8bc9c1; }
.zone-one-to-one, .zone-card[data-zone-identity="one-to-one"] { --zone-accent: #ad5b00; --zone-tint: #fff0dc; --zone-border: #edbd81; }
.zone-gnc, .zone-card[data-zone-identity="gnc"] { --zone-accent: #1769aa; --zone-tint: #e5f1fb; --zone-border: #9fc5e8; }
.zone-card { border-color: var(--zone-accent, #075e54); color: var(--zone-accent, #075e54); gap: .2rem; }
.zone-card:hover { background: var(--zone-tint, #d8eee9); }
.zone-card .zone-icon { color: var(--zone-accent, #075e54); }
.participant-zone h1 .zone-icon { color: var(--zone-accent, #075e54); margin-right: .4rem; }
.zone-icon { font-size: 1.25em; font-weight: 800; line-height: 1; }
.participant-zone .zone-control-add, .participant-zone .zone-link.current { background: var(--zone-tint, #d8eee9); border-color: var(--zone-accent, #075e54); color: var(--zone-accent, #075e54); }
.zone-list-heading { align-items: baseline; display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.zone-list-heading h2 { margin: 0; }
.zone-list-heading p { color: #45565f; font-size: .92rem; font-weight: 700; margin: 0; }
.zone-list { border: 0; display: grid; gap: .85rem; margin-top: .75rem; }
.reference-list.zone-list .zone-list-card { background: #fff; border: 1px solid #d7e0e3; border-left: 4px solid var(--zone-accent, #075e54); border-radius: .65rem; box-shadow: 0 1px 2px rgb(23 33 43 / 8%); padding: 1rem; }
.zone-list .empty-state-panel { border-left-color: var(--zone-accent, #075e54); }
.field--error { background: #fff5f5; border: 2px solid #ad1d2d; border-radius: .55rem; padding: .75rem; }
.field--error input, .field--error select, .field--error textarea { border-color: #ad1d2d; }
.field-help { background: #f0f6f8; border-left: 4px solid #1769aa; color: #273e4a; margin-top: .6rem; padding: .75rem; }
.field-help ul { margin: .45rem 0 0; padding-left: 1.25rem; }
.form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .9rem; }
.cancel-link { color: #45565f; font-weight: 700; padding: .75rem .25rem; }
@media (max-width: 34rem) { .zone-list-heading { align-items: flex-start; flex-direction: column; gap: .15rem; } .form-actions { align-items: stretch; flex-direction: column; } .form-actions > * { text-align: center; } }