:root { color-scheme: light; --paper: #edf2f0; --surface: #fff; --ink: #142923; --accent: #215648; --line: #c5d3cd; --alert: #a03531; font-family: "Instrument Sans", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.shell { max-width: 55rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.4rem); }
.masthead { background: var(--ink); color: #f5faf7; border-bottom: 4px solid #6f9b89; }
.masthead-inner { min-height: 5.15rem; display: flex; justify-content: space-between; align-items: center; gap: .7rem; }
.building { display: flex; align-items: center; gap: .85rem; font-size: .78rem; line-height: 1.25; font-weight: 650; }
.number { font-size: 2.15rem; line-height: 1; font-weight: 760; letter-spacing: -.08em; border-right: 1px solid #79988a; padding-right: .9rem; }
main { padding-block: clamp(2rem, 9vw, 5rem); }
.panel { width: min(100%, 32rem); background: var(--surface); padding: clamp(1.3rem, 5vw, 2.6rem); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.address { color: var(--accent); font-weight: 650; margin: 0 0 .75rem; overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 7vw, 3.45rem); line-height: .98; margin: 0 0 1.4rem; letter-spacing: -.055em; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
p { line-height: 1.55; }
label { display: block; font-weight: 650; margin: 1.2rem 0 .4rem; font-size: .92rem; }
input { min-height: 2.85rem; width: 100%; padding: .6rem .75rem; border: 1px solid #8aa095; border-radius: 4px; color: inherit; background: white; font: inherit; }
button { min-height: 2.75rem; border: 1px solid transparent; border-radius: 4px; padding: .6rem .85rem; background: var(--accent); color: white; cursor: pointer; font: inherit; font-weight: 650; }
form > button { margin-top: .9rem; }
button:hover { filter: brightness(.91); }
button:disabled { opacity: .65; cursor: wait; }
.quiet { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: .18em; }
#start-over { display: block; text-align: left; padding-inline: 0; }
.danger { color: var(--alert); }
button:focus-visible, input:focus-visible { outline: 3px solid #ad691c; outline-offset: 3px; }
.invite-box { padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); }
.invite-fields { display: flex; gap: .65rem; }
.invite-fields button { flex-shrink: 0; }
.directory { margin-top: 2rem; }
ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
li { min-height: 3.35rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .35rem .1rem; gap: .3rem 1rem; border-bottom: 1px solid var(--line); }
.person { overflow-wrap: anywhere; min-width: 0; }
.person small { display: block; margin-top: .2rem; color: #486258; }
.actions { display: flex; flex-wrap: wrap; }
#status { max-width: 36rem; margin-block: 1rem 0; }
#status[data-error="true"] { color: var(--alert); }
@media (max-width: 440px) { .invite-fields { flex-direction: column; } .invite-fields button { align-self: start; } }