/* Fox Hall HOA — shared styles  v0.1.0 (2026-06-28) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --ink:#2b2417;        /* dark warm brown — body text */
  --ink-soft:#6f6553;   /* muted text */
  --gold:#b8924a;       /* banner gold (from the crest) */
  --green:#33432f;      /* shield green */
  --green-dk:#283621;
  --fox:#c0612e;        /* fox-orange accent */
  --bg:#f7f3ea;         /* cream */
  --panel:#ffffff;
  --line:#e7dcc6;       /* warm hairline */
  --shadow:0 1px 3px rgba(43,36,23,.06), 0 8px 24px rgba(43,36,23,.05);
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --display:'Cormorant Garamond', Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--ink); text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem clamp(1rem,4vw,2.5rem);
  background:rgba(247,243,234,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.6rem}
.brand img{height:42px; width:auto}
.brand .word{font-family:var(--display); font-weight:700; font-size:1.4rem; letter-spacing:.2em; text-transform:uppercase}
.nav-links{display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem)}
.nav-links a{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink); border-bottom:2px solid var(--gold); padding-bottom:3px}

.btn{
  display:inline-block; font-family:var(--serif);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.62rem 1.2rem; border-radius:2px;
  border:1px solid var(--green); background:var(--green); color:#f7f3ea !important; transition:.15s;
}
.btn:hover{background:var(--green-dk); border-color:var(--green-dk)}
.btn-ghost{background:transparent; color:var(--ink) !important; border-color:var(--gold)}
.btn-ghost:hover{background:var(--gold); color:#fff !important}

/* ---------- hero ---------- */
.hero{text-align:center; padding:clamp(2.5rem,7vw,5rem) 1.25rem 2rem; max-width:780px; margin:0 auto}
.hero .crest{max-width:430px; width:80%; margin:0 auto 1.1rem}
.eyebrow{font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0}
.hero h1{font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,5vw,3rem); line-height:1.08; margin:.35rem 0 .4rem}
.lede{color:var(--ink-soft); font-size:1.12rem; max-width:54ch; margin:.5rem auto 0}
.rule{width:64px; height:2px; background:var(--gold); margin:1.6rem auto; border:0}

/* ---------- sections ---------- */
.section{max-width:1060px; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--line); padding-bottom:.6rem; margin-bottom:1.7rem}
.section-head h2{font-family:var(--display); font-weight:600; font-size:1.95rem; margin:0}
.section-head a{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fox); white-space:nowrap}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.1rem}
.card{background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:1.4rem 1.55rem; box-shadow:var(--shadow); transition:.15s}
.card:hover{transform:translateY(-2px); box-shadow:0 2px 6px rgba(43,36,23,.08), 0 14px 30px rgba(43,36,23,.07)}
.card .date{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.card h3{font-family:var(--display); font-weight:600; font-size:1.5rem; margin:.3rem 0 .5rem; line-height:1.15}
.card p{margin:0; color:var(--ink-soft); font-size:1rem}
.card .more{display:inline-block; margin-top:.95rem; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fox)}

/* welcome band */
.band{background:linear-gradient(180deg,#fbf8f1,#f2ebdb); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band .section{text-align:center; max-width:820px}
.band h2{font-family:var(--display); font-weight:600; font-size:1.95rem; margin:0 0 .2rem}
.band p{max-width:62ch; margin:.5rem auto 0; color:var(--ink-soft)}

/* page header (interior pages) */
.page-head{text-align:center; padding:clamp(2.2rem,6vw,4rem) 1.25rem 1rem; max-width:720px; margin:0 auto}
.page-head h1{font-family:var(--display); font-weight:600; font-size:clamp(2rem,5vw,2.8rem); margin:.3rem 0 .3rem}

/* ---------- footer ---------- */
.footer{text-align:center; padding:2.5rem 1rem; color:var(--ink-soft); font-size:.92rem; border-top:1px solid var(--line)}
.footer .word{font-family:var(--display); letter-spacing:.22em; text-transform:uppercase; color:var(--ink); font-size:1.05rem}
.footer a{color:var(--fox)}
.footer .fine{font-size:.78rem; margin-top:.5rem}
.muted{color:var(--ink-soft)}

/* centered simple page (login shell) */
.center-screen{min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem}
.center-screen .box{max-width:420px}

/* The nav starts crowding well before the old 640px breakpoint: the home page carries seven
   links now, and .nav had no flex-wrap, so they compressed instead of moving. */
@media (max-width:900px){
  .nav{flex-wrap:wrap; gap:.4rem 1rem}
  .nav-links{gap:clamp(.7rem,2vw,1.4rem)}
}

@media (max-width:640px){
  .nav-links .hide-sm{display:none}
  body{font-size:17px}

  /* Brand on its own line, links wrapped and centred beneath. Two compact rows beats five items
     fighting for 400px, and it needs no JS menu. */
  .nav{flex-direction:column; align-items:center; padding:.5rem 1rem .65rem; gap:.45rem}
  .brand img{height:34px}
  .brand .word{font-size:1.12rem; letter-spacing:.16em}
  .nav-links{flex-wrap:wrap; justify-content:center; width:100%; gap:.55rem .95rem}
  .nav-links a{font-size:.74rem; letter-spacing:.1em}
  .nav-links .btn{padding:.45rem .9rem; font-size:.72rem}

  /* .stack-form pinned inputs at min-width:240px, which overflows a 390px viewport once the
     button sits beside it. Stack and fill instead. */
  .stack-form{flex-direction:column; align-items:stretch; gap:.6rem; margin-top:1.1rem}
  .stack-form input{min-width:0; width:100%}
  .stack-form .btn{width:100%; text-align:center}
  .signin-ac{flex:1 1 auto; width:100%}
  #code{min-width:0; width:100%; font-size:1.2rem}

  .center-screen{min-height:auto; padding:1.5rem 1rem 2.5rem}
  .center-screen .box{max-width:100%}
  .hero{padding-top:1.75rem}
  .hero .crest{width:66%}
  .section, .page-head{padding-left:1rem; padding-right:1rem}
  .cards{grid-template-columns:1fr}

  /* Admin: the stat row and the queue action bar both assumed desktop width. */
  .admin-stats{grid-template-columns:repeat(2,1fr); gap:.55rem}
  .stat{padding:.7rem .8rem}
  .stat-v{font-size:1.45rem}
  .section-head{flex-direction:column; align-items:flex-start; gap:.6rem}
  .admin-filters{width:100%}
  .admin-filters input[type=search]{min-width:0; flex:1 1 100%}
  .queue-actions{flex-direction:column; align-items:stretch}
  .queue-actions .btn, .queue-actions .btn-ghost-sm{width:100%; text-align:center}
  .review-note{flex:1 1 auto; width:100%}
  .edit-actions{flex-wrap:wrap}
  .edit-actions .danger{margin-left:0}
}

/* Very narrow phones — keep the wordmark from wrapping mid-word. */
@media (max-width:380px){
  .brand .word{font-size:1rem; letter-spacing:.12em}
  .nav-links a{font-size:.7rem}
  .admin-stats{grid-template-columns:1fr}
}

/* ---------- neighborhood feed ---------- */
.feed-wrap{max-width:620px; margin:0 auto; padding:0 1rem 3.5rem}
.composer{background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin-bottom:1.6rem}
.composer-note{font-size:.92rem; color:var(--ink-soft); margin-bottom:.7rem}
.composer-note a{color:var(--fox)}
.composer textarea{width:100%; border:1px solid var(--line); border-radius:6px; resize:vertical;
  font-family:var(--serif); font-size:1.05rem; padding:.7rem .8rem; background:#fffdf9; color:var(--ink)}
.composer textarea:focus{outline:2px solid #d8c39a; outline-offset:1px}
.photo-preview{margin:.8rem 0 .2rem}
.photo-preview:empty{display:none}
.photo-preview img{max-height:260px; border-radius:6px; border:1px solid var(--line)}
.composer-bar{display:flex; align-items:center; gap:.9rem; margin-top:.8rem; flex-wrap:wrap}
.attach{cursor:pointer; font-size:.85rem; color:var(--ink); border:1px solid var(--line);
  border-radius:2px; padding:.5rem .8rem; background:#faf6ee}
.attach:hover{border-color:var(--gold)}
.compose-status{flex:1; min-width:150px; font-size:.84rem}
.post-btn{white-space:nowrap}

.timeline{display:flex; flex-direction:column; gap:1rem}
.post{display:flex; gap:.85rem; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:1.05rem 1.2rem; box-shadow:var(--shadow)}
.avatar{flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; background:var(--green); color:#f7f3ea;
  font-family:var(--display); font-weight:600; font-size:1.2rem}
.post-body{min-width:0; flex:1}
.post-meta{font-size:.95rem; margin-bottom:.1rem}
.post-author{font-weight:600; font-family:var(--display); font-size:1.15rem}
.post-text{margin:.1rem 0 0; white-space:pre-wrap; word-wrap:break-word}
.post-photos{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem; margin-top:.7rem}
.post-photo{width:100%; border-radius:6px; border:1px solid var(--line); object-fit:cover}

/* feed actions: likes + replies */
.post-actions{display:flex; align-items:center; gap:1.3rem; margin-top:.7rem; position:relative}
.act{display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; cursor:pointer;
  font-family:var(--serif); font-size:.95rem; color:var(--ink-soft); padding:.1rem}
.act .ic{font-size:1.15rem; line-height:1}
.act .lbl{font-size:.82rem}
.act:hover{color:var(--ink)}
.act.like.on{color:var(--fox)}
.act.like.on .ic{color:var(--fox)}
.act-hint{font-size:.78rem; color:var(--fox); opacity:0; transition:opacity .2s}
.act-hint.show{opacity:1}
.replies{margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.75rem}
.reply{display:flex; gap:.6rem}
.avatar.sm{width:30px; height:30px; font-size:.9rem}
.reply .post-author{font-size:1rem}
.reply .post-text{font-size:.98rem}
.reply-compose{display:flex; gap:.5rem; align-items:center; font-size:.92rem; margin-top:.1rem}
.reply-compose a{color:var(--fox)}
.reply-input{flex:1; border:1px solid var(--line); border-radius:6px; padding:.45rem .6rem;
  font-family:var(--serif); font-size:.95rem; background:#fffdf9; color:var(--ink)}
.btn.sm{padding:.4rem .85rem; font-size:.72rem}
.reply-loading{margin:.1rem 0}

/* ---------- seasonal task tracker ---------- */
.tasks-wrap{max-width:820px; margin:0 auto; padding:0 1rem 3.5rem}
#recent-activity:not(:empty){margin-bottom:2.2rem}
.recent-list{display:flex; flex-direction:column; gap:.6rem}
.recent-item{display:flex; gap:.6rem; align-items:flex-start; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; box-shadow:var(--shadow)}
.rc-check{line-height:1.4}
.rc-title{font-family:var(--display); font-weight:600; font-size:1.1rem}
.rc-meta{font-size:.9rem}

.season{margin-bottom:2.2rem}
.season .section-head h2{font-size:1.6rem}
.season-count{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.task-list{display:flex; flex-direction:column; gap:.8rem}
.task-card{display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1rem 1.2rem; box-shadow:var(--shadow)}
.task-main{min-width:0}
.task-card h3{font-family:var(--display); font-weight:600; font-size:1.25rem; margin:0 0 .25rem;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.badge-big{font-family:var(--serif); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--fox); border-radius:3px; padding:.15rem .45rem}
.task-desc{margin:0 0 .45rem; color:var(--ink-soft); font-size:1rem}
.task-last{font-size:.85rem; color:var(--green)}
.task-last.none{color:var(--ink-soft); font-style:italic}
.btn-ghost-sm{flex:0 0 auto; font-family:var(--serif); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.5rem .85rem; border:1px solid var(--gold); border-radius:2px;
  background:transparent; color:var(--ink); cursor:pointer; white-space:nowrap}
.btn-ghost-sm:hover{background:var(--gold); color:#fff}

/* completion modal */
.modal-root{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1rem}
.modal-root[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(43,36,23,.45); backdrop-filter:blur(2px)}
.modal-card{position:relative; background:var(--bg); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 60px rgba(43,36,23,.3); width:min(520px,100%); max-height:90vh; overflow:auto; padding:1.6rem 1.7rem}
.modal-head{display:flex; align-items:center; justify-content:space-between}
.modal-x{background:none; border:0; font-size:1.6rem; line-height:1; color:var(--ink-soft); cursor:pointer}
.modal-title{font-family:var(--display); font-weight:600; font-size:1.6rem; margin:.2rem 0 .1rem}
.modal-desc{margin:0 0 1rem; font-size:.95rem}
.fld{display:block; margin-bottom:1rem}
.fld>span{display:block; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.3rem}
.fld em{text-transform:none; letter-spacing:0; font-style:italic; color:var(--ink-soft)}
.fld input[type=date], .fld textarea{width:100%; border:1px solid var(--line); border-radius:6px;
  font-family:var(--serif); font-size:1rem; padding:.55rem .7rem; background:#fffdf9; color:var(--ink)}
.modal-foot-note{font-size:.86rem; border-top:1px solid var(--line); padding-top:.8rem; margin-bottom:.4rem}
.modal-actions{display:flex; justify-content:flex-end; align-items:center; gap:.7rem}

/* ---------- portal / sign-in  (v0.2.0) ---------- */
.box-title{font-family:var(--display); font-weight:600; font-size:2rem; margin:.3rem 0 .6rem}
.stack-form{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:1.4rem 0 .4rem}
.stack-form input{font-family:var(--serif); font-size:1rem; padding:.6rem .8rem; min-width:240px;
  border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink)}
.stack-form input:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
#code{letter-spacing:.4em; text-align:center; font-size:1.3rem; min-width:200px}

.portal-lots{list-style:none; padding:0; margin:1.2rem 0; text-align:left; display:inline-block}
.portal-lots li{padding:.35rem 0; border-bottom:1px solid var(--line)}
.portal-lots li:last-child{border-bottom:0}
.portal-actions{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem}

/* Status text: .error is the only state that should pull the eye. */
.error{color:var(--fox); font-weight:500}

/* ---------- composer photo tray ---------- */
.photo-thumb{position:relative; display:inline-block; margin:.4rem .4rem 0 0}
.photo-thumb img{max-width:120px; max-height:120px; border-radius:6px; display:block}
.photo-remove{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
  font-size:1rem; line-height:1; padding:0; box-shadow:var(--shadow)}
.photo-remove:hover{background:var(--fox); color:#fff; border-color:var(--fox)}

.reply-status{margin-left:.5rem; font-size:.85rem}
.modal-error{color:var(--fox); font-size:.9rem; margin:.2rem 0 .6rem}
.load-more-wrap{text-align:center; padding:1.2rem 0}

/* ---------- task activity photos ---------- */
.rc-photos{margin-top:.4rem; display:flex; gap:.4rem; flex-wrap:wrap}
.rc-photo{max-width:110px; max-height:110px; border-radius:6px; display:block}

@media (max-width:560px){
  .task-card{flex-direction:column; gap:.6rem}
  .btn-ghost-sm{align-self:flex-start}
  .stack-form{flex-direction:column}
  .stack-form input{min-width:0; width:100%}
}

/* ---------- shared form controls  (v0.3.0) ---------- */
/* .fld previously styled only date inputs and textareas; the registration and admin forms use
   text/email/tel/select too, and an unstyled native control next to a styled one reads as broken. */
.fld input[type=text], .fld input[type=email], .fld input[type=tel],
.fld input[type=search], .fld select{
  width:100%; border:1px solid var(--line); border-radius:6px; font-family:var(--serif);
  font-size:1rem; padding:.55rem .7rem; background:#fffdf9; color:var(--ink)}
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:1px}
.chk{display:flex; align-items:center; gap:.5rem; font-size:.92rem; margin:.4rem 0}
.chk input{width:auto; margin:0}
.status-error{color:var(--fox); font-weight:500}
.status-ok{color:var(--green)}
.pill{display:inline-block; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  background:var(--gold); color:#fff; border-radius:999px; padding:.1rem .5rem; vertical-align:middle}
.pill-muted{background:var(--ink-soft)}
.pill-warn{background:var(--fox)}
.warn{color:var(--fox); font-style:italic}

/* ---------- registration  (v0.1.0) ---------- */
.reg-wrap{max-width:560px; margin:0 auto; padding:0 1rem 3.5rem}
.reg-note{margin:-.4rem 0 1.2rem}
.reg-actions{margin-top:1.6rem}
.reg-status{margin-top:1rem}
.reg-privacy{margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.reg-done{background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:2rem; text-align:center}

/* Address autocomplete. The list is absolutely positioned so it overlays following fields
   rather than shoving the form down on every keystroke. */
.ac{position:relative}
.ac-list{position:absolute; z-index:20; left:0; right:0; top:calc(100% + 2px); margin:0; padding:0;
  list-style:none; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow); max-height:16rem; overflow-y:auto}
.ac-item{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.5rem .7rem; cursor:pointer; font-size:.95rem}
.ac-item.is-active, .ac-item:hover{background:var(--bg)}
.ac-addr{font-weight:500}
.ac-lot{font-size:.78rem; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase}
.ac-chosen{margin:.4rem 0 0; font-size:.88rem; color:var(--green); font-style:italic}

/* ---------- admin  (v0.1.0) ---------- */
.admin-wrap{max-width:940px; margin:0 auto; padding:0 1rem 4rem}
.admin-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem;
  margin-bottom:2.4rem}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.9rem 1rem}
.stat-warn{border-color:var(--fox); background:#fdf6ec}
.stat-warn .stat-v{color:var(--fox)}
.stat-v{display:block; font-family:var(--display); font-size:1.8rem; font-weight:600; line-height:1.1}
.stat-l{display:block; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.2rem}
.admin-section{margin-bottom:3rem}
.admin-filters{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.admin-filters input[type=search], .admin-filters select{border:1px solid var(--line);
  border-radius:6px; font-family:var(--serif); font-size:.92rem; padding:.4rem .6rem;
  background:#fffdf9; color:var(--ink)}
.admin-filters input[type=search]{min-width:230px}
.inline-fld{display:flex; align-items:center; gap:.4rem; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft)}
.count-chip{display:inline-block; background:var(--fox); color:#fff; border-radius:999px;
  font-family:var(--serif); font-size:.8rem; padding:.05rem .55rem; vertical-align:middle;
  margin-left:.4rem}
.admin-status{position:sticky; bottom:1rem; background:var(--panel); border:1px solid var(--line);
  border-radius:6px; box-shadow:var(--shadow); padding:.6rem 1rem; text-align:center}

/* approval queue */
.queue-card{background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:1.2rem 1.3rem; margin-bottom:1rem}
.queue-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem}
.queue-head h3{margin:0; font-family:var(--display); font-size:1.35rem; font-weight:600}
.queue-addr{margin:.15rem 0 0; font-size:.95rem}
.queue-addr code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em}
.queue-contact{margin:.7rem 0 0; font-size:.95rem}
.queue-note{margin:.6rem 0 0; font-style:italic; color:var(--ink-soft)}
.flags{list-style:none; margin:.9rem 0 0; padding:0}
.flag{background:#fdf6ec; border-left:3px solid var(--fox); border-radius:0 4px 4px 0;
  padding:.5rem .75rem; margin-bottom:.4rem; font-size:.9rem}
.queue-onfile{margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--line)}
.queue-onfile .label{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft)}
.on-file{list-style:none; margin:.3rem 0 0; padding:0; font-size:.92rem}
.on-file li{padding:.15rem 0}
.on-file-none{margin:.3rem 0 0; font-size:.92rem}
.queue-actions{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:1rem;
  padding-top:.9rem; border-top:1px solid var(--line)}
.review-note{flex:1 1 200px; border:1px solid var(--line); border-radius:6px; font-family:var(--serif);
  font-size:.9rem; padding:.4rem .6rem; background:#fffdf9; color:var(--ink)}

/* address book */
.book-list{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel)}
.book-row{border-bottom:1px solid var(--line)}
.book-row:last-child{border-bottom:0}
.book-row.is-new{border:1px solid var(--gold); border-radius:8px; background:var(--panel);
  margin-bottom:1rem; padding:1.2rem}
.book-main{display:grid; grid-template-columns:1.1fr 1.2fr 1.4fr auto; gap:1rem; align-items:baseline;
  width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:.7rem 1rem;
  font-family:var(--serif); font-size:.95rem; color:var(--ink)}
.book-main:hover{background:var(--bg)}
.book-row.is-former .book-main{opacity:.62}
.book-addr{font-weight:500}
.book-contact{color:var(--ink-soft); overflow-wrap:anywhere}
.book-role{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase}
.edit-form{padding:1.2rem 1rem 1.4rem; background:var(--bg); border-top:1px solid var(--line)}
.book-row.is-new .edit-form{background:none; border-top:0; padding:0}
.edit-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 1rem}
.edit-actions{display:flex; gap:.7rem; align-items:center; margin-top:1rem}
.edit-actions .danger{margin-left:auto; color:var(--fox); border-color:var(--fox)}

@media (max-width:720px){
  .book-main{grid-template-columns:1fr; gap:.15rem}
  .book-role{display:none}
}

/* Sign-in address picker: the .stack-form row is centred and flex, so the combobox needs a
   width of its own or the suggestion list collapses to the input's intrinsic size. */
.signin-ac{flex:0 1 260px; text-align:left}
.signin-ac input{min-width:0; width:100%}
.signin-form{align-items:flex-start}
.signin-hint{margin-top:.9rem}

/* Turnstile. Deliberately data-appearance="always": interaction-only verified silently, which
   left residents (and the administrator) unable to tell the check was working — and meant a
   challenge that DID appear could go unnoticed until submit failed. Visible is worth the space. */
.turnstile-box{margin:1.1rem 0 .4rem; display:flex; justify-content:center; min-height:65px}
.turnstile-box:empty{margin:0; min-height:0}

/* Sign-in channel picker. Rendered from /api/auth/channels, so it only ever shows options the
   household can actually receive — never "text me" for someone with no number on file. */
.channel-choice{display:flex; flex-direction:column; gap:.5rem; width:100%; text-align:left}
.channel-opt{display:flex; align-items:flex-start; gap:.6rem; padding:.65rem .8rem; cursor:pointer;
  border:1px solid var(--line); border-radius:6px; background:#fffdf9; transition:.12s}
.channel-opt:hover{border-color:var(--gold)}
.channel-opt:has(input:checked){border-color:var(--green); background:#fbfaf5}
.channel-opt input{margin:.25rem 0 0}
.channel-opt .label{font-weight:500}
.channel-opt .hint{display:block; font-size:.85rem; color:var(--ink-soft)}

/* ---------- legal pages (privacy, terms)  (v0.1.0) ---------- */
/* Long-form reading, so a narrower measure and more air between sections than the marketing pages. */
.legal{max-width:44rem; margin:0 auto; padding:0 1.1rem 3.5rem}
.legal-meta{font-size:.85rem; color:var(--ink-soft); font-style:italic; margin-bottom:1.6rem}
.legal h2{font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--green);
  margin:2.2rem 0 .6rem; padding-top:.4rem; border-top:1px solid var(--line)}
.legal h3{font-family:var(--display); font-size:1.15rem; font-weight:600; margin:1.4rem 0 .35rem}
.legal p{margin:0 0 .9rem}
.legal ul{margin:0 0 1rem; padding-left:1.2rem}
.legal li{margin-bottom:.45rem}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:.05rem .3rem}
.legal a{text-decoration:underline; text-underline-offset:2px}

/* The summary box carries the parts most people will actually read. */
.legal-summary{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0; padding:1.1rem 1.3rem; margin-bottom:1.6rem}
.legal-summary h2{margin:0 0 .5rem; border-top:0; padding-top:0; font-size:1.2rem}
.legal-summary ul{margin-bottom:0}

.legal-table{width:100%; border-collapse:collapse; margin:.6rem 0 1.1rem; font-size:.95rem}
.legal-table th, .legal-table td{border:1px solid var(--line); padding:.5rem .7rem; text-align:left;
  vertical-align:top}
.legal-table th{background:var(--panel); font-family:var(--display); font-weight:600}
.legal-foot{margin-top:2.4rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--ink-soft)}

/* SMS consent block. Carriers require express, affirmative opt-in — the box must be unchecked by
   default and the disclosures must sit next to it, not behind a link. It is also what the A2P
   10DLC campaign reviewer looks for when verifying the call to action. */
.sms-consent{border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:0 6px 6px 0;
  background:var(--panel); padding:.85rem 1rem; margin:0 0 1.1rem}
.sms-consent .chk{margin:0 0 .45rem; font-size:1rem}
.sms-consent-terms{margin:0; line-height:1.5}
/* Consent disclosure is always visible; before a number is entered it reads as inactive
   rather than disappearing -- hiding it is what got the 10DLC campaign rejected. */
.sms-consent.is-inactive{opacity:.6}
.sms-consent.is-inactive .chk{cursor:default}