/* Santa Fe HOA issue tracker.
   Layout: sticky bar, KPI tiles, tabs. Cards = grid of issues; Walkthrough = order list left,
   spotlight (view + edit) right; People = authorized emails (officers). */
:root{
  --bg:#eef3f3; --surface:#ffffff; --surface-2:#e6eeee; --ink:#132529; --muted:#566a6f; --line:#d5e0e1;
  --accent:#0b6a70; --accent-ink:#ffffff; --accent-soft:#d9eeee;
  --high:#b3262f; --high-soft:#fbe7e8; --med:#9a5d00; --med-soft:#fbf0dc; --low:#3f6f35; --low-soft:#e6f1e2;
  --st-open:#24539e; --st-open-soft:#e3ecfa; --st-prog:#8a5a00; --st-prog-soft:#fcefd6;
  --st-pay:#6b3fa6; --st-pay-soft:#efe6fa; --st-hold:#56656a; --st-hold-soft:#e9eeef; --st-done:#2f6d3b; --st-done-soft:#e2f1e4;
  --sec-desc:#eef3f4; --sec-act:#e1f0f0; --sec-next:#edf0f6; --sec-next-ink:#4a5874;
  --shadow:0 1px 2px rgba(19,37,41,.06),0 2px 8px rgba(19,37,41,.05);
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1517; --surface:#132024; --surface-2:#1a2a2e; --ink:#e2eced; --muted:#93a8ac; --line:#243539;
  --accent:#57b8bd; --accent-ink:#06282a; --accent-soft:#16363a;
  --high:#f08a90; --high-soft:#3a1c1f; --med:#e8b25a; --med-soft:#36290f; --low:#98cc8a; --low-soft:#1d3119;
  --st-open:#8fb3f0; --st-open-soft:#1a2a45; --st-prog:#e8b25a; --st-prog-soft:#36290f;
  --st-pay:#c3a2f0; --st-pay-soft:#2c1f44; --st-hold:#a9b8bb; --st-hold-soft:#223034; --st-done:#8fd09c; --st-done-soft:#173322;
  --sec-desc:#17262a; --sec-act:#14302f; --sec-next:#1a2333; --sec-next-ink:#a9b6d0;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1517; --surface:#132024; --surface-2:#1a2a2e; --ink:#e2eced; --muted:#93a8ac; --line:#243539;
  --accent:#57b8bd; --accent-ink:#06282a; --accent-soft:#16363a;
  --high:#f08a90; --high-soft:#3a1c1f; --med:#e8b25a; --med-soft:#36290f; --low:#98cc8a; --low-soft:#1d3119;
  --st-open:#8fb3f0; --st-open-soft:#1a2a45; --st-prog:#e8b25a; --st-prog-soft:#36290f;
  --st-pay:#c3a2f0; --st-pay-soft:#2c1f44; --st-hold:#a9b8bb; --st-hold-soft:#223034; --st-done:#8fd09c; --st-done-soft:#173322;
  --sec-desc:#17262a; --sec-act:#14302f; --sec-next:#1a2333; --sec-next-ink:#a9b6d0;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{margin:0}
.muted{color:var(--muted)} .small{font-size:13px}

/* bar */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-block:12px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.mark{width:40px;height:40px;flex:none;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em}
.title-wrap{min-width:0;flex:1}
.title-wrap h1{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;text-wrap:balance}
.sub{font-size:13px;color:var(--muted)}
.mode{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.mode b{color:var(--ink);font-weight:600}
.mode .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.mode.is-officer .dot{background:var(--accent)}

.main{max-width:1440px;margin:0 auto;padding-block:20px 60px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.k-label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.k-val{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.k-val small{font-size:14px;color:var(--muted);margin-left:3px;font-family:var(--body)}
.k-foot{font-size:12.5px;color:var(--muted);min-height:19px}
.kpi.warn .k-val{color:var(--high)}
.meter{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.meter span{display:block;height:100%;background:var(--st-done);transition:width .5s ease}

/* tabs */
.tabs{display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab{font-weight:600;color:var(--muted);background:none;border:0;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab .n{font-size:12px;color:var(--muted);margin-left:4px;font-weight:500}
.tab-spacer{flex:1}
.seg{display:inline-flex;background:var(--surface-2);border-radius:8px;padding:2px;margin-block:4px}
.seg button{font-size:13px;font-weight:600;border:0;background:none;color:var(--muted);padding:5px 12px;border-radius:6px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.search{flex:1 1 240px;min-width:0;position:relative;max-width:460px}
.search input{width:100%;box-sizing:border-box;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.sel{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 14px;cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.sm{padding:4px 10px;font-size:13px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:none;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--high)}
.btn.danger.armed{background:var(--high);color:var(--surface);border-color:var(--high)}
.btn.link{border:0;background:none;padding:2px 6px;color:var(--muted);font-weight:500;font-size:12.5px}
.btn.link:hover{color:var(--high)}
.btn:disabled{opacity:.5;cursor:default}
.kbd{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-left:6px;font-weight:500}
.btn.primary .kbd{color:inherit;border-color:currentColor;opacity:.7}

/* badges and pills */
.pbadge{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px}
.pb-High{background:var(--high);color:var(--surface)} .pb-Medium{background:var(--med);color:var(--surface)} .pb-Low{background:var(--low);color:var(--surface)}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.p-High{color:var(--high);background:var(--high-soft)} .p-Medium{color:var(--med);background:var(--med-soft)} .p-Low{color:var(--low);background:var(--low-soft)}
.s-Open{color:var(--st-open);background:var(--st-open-soft)} .s-InProgress{color:var(--st-prog);background:var(--st-prog-soft)}
.s-PendingPayment{color:var(--st-pay);background:var(--st-pay-soft)} .s-OnHold{color:var(--st-hold);background:var(--st-hold-soft)} .s-Resolved{color:var(--st-done);background:var(--st-done-soft)}
.pill.done{color:var(--st-done);background:var(--st-done-soft)}
.pill.late{color:var(--high);background:var(--high-soft)}
.due{font-family:var(--mono);font-size:12.5px}
.due.late{color:var(--high);font-weight:500}

/* cards view */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;align-items:start}
.icard{padding:16px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:transform .15s ease,border-color .15s ease;text-align:left;width:100%;box-sizing:border-box}
.icard:hover{transform:translateY(-2px);border-color:var(--accent)}
.icard.is-done{opacity:.62} .icard.is-done:hover{opacity:1}
.c-head{display:flex;gap:12px;align-items:flex-start}
.c-title{min-width:0;flex:1}
.c-name{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.c-who{font-size:13px;color:var(--muted);margin-top:2px}
.c-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;color:var(--muted)}
.sec{border-radius:8px;padding:10px 12px;background:var(--sec-desc)}
.sec h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin-bottom:3px}
.sec p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.sec.act{background:var(--sec-act)} .sec.act h4{color:var(--accent)}
.sec.next{background:var(--sec-next)} .sec.next h4{color:var(--sec-next-ink)}
.clamp p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sec-foot{font-size:12px;color:var(--muted);margin-top:5px}
.empty-val{color:var(--muted);font-style:italic}

/* walkthrough */
.robin{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}
.robin>*{min-width:0}
.queue{padding:14px;position:sticky;top:calc(80px + env(safe-area-inset-top, 0px))}
.queue-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.queue-head h3{font-size:14px;font-weight:600}
.progress-line{height:4px;border-radius:2px;background:var(--surface-2);margin:8px 0 10px;overflow:hidden}
.progress-line span{display:block;height:100%;background:var(--st-done);transition:width .4s ease}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:62vh;overflow:auto}
.qitem{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;font-weight:600;font-size:14px}
.qitem:hover{background:var(--surface-2)}
.qitem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.qitem.current{background:var(--accent-soft);color:var(--accent)}
.qitem.done .qname{text-decoration:line-through;color:var(--muted)}
.qnum{width:18px;text-align:right;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.qitem .pbadge{width:24px;height:24px;border-radius:6px;font-size:11px}
.qname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.qflag{font-size:11px;font-weight:600;color:var(--high)}
.qflag.ok{color:var(--st-done)}

.spot{padding:24px 26px;min-height:420px}
.spot-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.spot-top .pbadge{width:60px;height:60px;border-radius:14px;font-size:22px}
.spot-title{min-width:0;flex:1 1 300px}
.spot-eyebrow{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.03em}
.spot-name{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.1;overflow-wrap:anywhere;text-wrap:balance;margin:2px 0 6px}
.spot-pills{display:flex;gap:6px;flex-wrap:wrap}
.spot-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.timer{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border-radius:999px;background:var(--surface-2)}
.ring{position:relative;width:42px;height:42px}
.ring svg{transform:rotate(-90deg);display:block}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.timer.over .t{color:var(--high)}
.timer select{padding:3px 4px;font-size:12.5px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px 18px;margin-bottom:20px}
.fk{display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fv{font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.fv.money{font-family:var(--mono);font-weight:500}
.fact select{margin-top:3px;width:100%;padding:5px 8px;font-weight:600;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.spot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.spot-grid .sec{padding:14px 16px}
.spot-grid .sec p{font-size:clamp(15px,1.15vw,17px);line-height:1.5}
.comments{margin-top:20px;display:grid;gap:10px}
.comments-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.comments-head h3{font-size:16px;font-weight:600}
.clist{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:420px;overflow:auto}
.cm{border-left:3px solid var(--line);padding:2px 0 2px 12px}
.cm.sys{border-left-style:dashed}
.cm-head{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;font-size:13.5px}
.cm-head b{font-weight:600}
.cm-head time{font-family:var(--mono);font-size:12px;color:var(--muted)}
.cm p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.cm.sys p{color:var(--muted);font-size:13.5px}
.cform{margin-top:6px;padding:16px;border:1px solid var(--accent);border-radius:12px;display:grid;gap:8px;background:var(--surface)}
.cform-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cform-head h3{font-size:15px;font-weight:600}
.form-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.form-row .grow{flex:1 1 200px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.spot-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;flex-wrap:wrap}
.spot-nav .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}

form.eform{display:grid;gap:12px}
.field{display:grid;gap:4px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.field textarea{resize:vertical;min-height:70px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.form-actions .spacer{flex:1}
.req{color:var(--high)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* needs attention */
.att-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.att-block{padding:16px}
.att-block h3{font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.att-block h3 .count{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}
.att-block .why{font-size:13px;color:var(--muted);margin:-4px 0 8px}
.att-item{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer}
.att-item:hover{background:var(--surface-2)}
.att-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.att-item .pbadge{width:28px;height:28px;border-radius:7px;font-size:12px}
.att-main{min-width:0}
.att-name{font-weight:600;overflow-wrap:anywhere}
.att-sub{font-size:12.5px;color:var(--muted)}

.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty h3{color:var(--ink);font-size:17px;margin-bottom:4px}
.foot{font-size:13px;color:var(--muted);margin:22px 0 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom, 0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-size:14px;max-width:min(520px,calc(100vw - 32px));box-shadow:0 6px 24px rgba(0,0,0,.18);z-index:30}

@media (max-width:980px){
  .robin{grid-template-columns:1fr}
  .queue{position:static}
  .qlist{max-height:none;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .qitem{width:auto;flex:none;max-width:220px}
  .spot-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .spot{padding:18px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-val{font-size:24px}
  .board{grid-template-columns:1fr}
  .actions{margin-left:0;width:100%}
  .actions .btn{flex:1}
  .kbd{display:none}
}
@media (prefers-reduced-motion:reduce){.icard,.meter span,.progress-line span{transition:none}}

/* ---------- signed-in user menu ---------- */
.who{position:relative}
.who-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font-weight:600;font-size:13.5px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700}
.who-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;z-index:40;display:grid}
.who-menu .meta{padding:8px 10px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}
.who-menu .meta b{display:block;color:var(--ink);font-size:14px}
.who-menu button{all:unset;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px}
.who-menu button:hover,.who-menu button:focus-visible{background:var(--surface-2)}

/* ---------- sign-in ---------- */
.signin{min-height:100%;display:grid;place-items:center;padding-block:48px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.signin-card{width:min(420px,100%);padding:28px;display:grid;gap:16px}
.signin-card .mark{width:48px;height:48px;font-size:17px}
.signin-card h1{font-family:var(--display);font-size:24px;line-height:1.15;text-wrap:balance}
.signin-card p{margin:0}
.signin-card input[type=email],.signin-card input[inputmode=numeric]{font-size:16px}
.code-input{letter-spacing:.4em;font-family:var(--mono);font-size:22px!important;text-align:center}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{margin-top:3px}
.msg{font-size:14px;padding:10px 12px;border-radius:8px;background:var(--accent-soft)}
.msg.err{background:var(--high-soft);color:var(--high)}
.linkish{all:unset;color:var(--accent);cursor:pointer;font-weight:600;font-size:14px}
.linkish:hover{text-decoration:underline}
.linkish:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.loading{padding:80px 16px;text-align:center;color:var(--muted)}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.ptable-wrap{overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ptable td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable tr:last-child td{border-bottom:0}
.ptable tr.inactive td{color:var(--muted)}
.ptable .email{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.ptable select{padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:13px}
.padd{padding:16px;display:grid;gap:10px;position:sticky;top:calc(80px + env(safe-area-inset-top, 0px))}
.padd h3{font-size:15px;font-weight:600}
@media (max-width:980px){.people{grid-template-columns:1fr}.padd{position:static}}