/* ============================================================
   House Hunt — cool grey paper, brass hardware, mono for data
   ============================================================ */

:root{
  --paper:#F2F4F7;
  --surface:#FFFFFF;
  --surface-2:#E9EDF2;
  --ink:#161B22;
  --ink-2:#4A5566;
  --ink-3:#7C8899;
  --line:#D6DDE6;
  --line-2:#C2CBD7;
  --brass:#9C7318;
  --brass-2:#7C5B10;
  --yes:#2F7A55;
  --maybe:#5A6B82;
  --no:#A93F3F;
  --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(22,27,34,.05), 0 1px 12px rgba(22,27,34,.04);
  /* Native widgets — the date picker especially — otherwise render as a white
     box in a dark page. This makes them follow the palette. */
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1319;
    --surface:#171C24;
    --surface-2:#212934;
    --ink:#E7ECF3;
    --ink-2:#A7B2C0;
    --ink-3:#778492;
    --line:#2B333E;
    --line-2:#3A4450;
    --brass:#DCAE52;
    --brass-2:#F0C877;
    --yes:#5FBE8C;
    --maybe:#93A5BE;
    --no:#E28787;
    --on-accent:#12161C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 12px rgba(0,0,0,.22);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1319;
  --surface:#171C24;
  --surface-2:#212934;
  --ink:#E7ECF3;
  --ink-2:#A7B2C0;
  --ink-3:#778492;
  --line:#2B333E;
  --line-2:#3A4450;
  --brass:#DCAE52;
  --brass-2:#F0C877;
  --yes:#5FBE8C;
  --maybe:#93A5BE;
  --no:#E28787;
  --on-accent:#12161C;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 12px rgba(0,0,0,.22);
  color-scheme: dark;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  padding:26px 20px 90px;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }

:where(a, button, input, textarea, [contenteditable]):focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
  border-radius:2px;
}

.mono{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; font-variant-numeric:tabular-nums; }
.display{ font-family:"Bricolage Grotesque", "Public Sans", sans-serif; }

/* ---------- masthead ---------- */

.mast{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px; }
.mast h1{
  font-family:"Bricolage Grotesque", "Public Sans", sans-serif;
  font-weight:700; font-size:clamp(27px, 4vw, 38px);
  letter-spacing:-.02em; line-height:1.05; margin:0; text-wrap:balance;
}
.mast h1 em{ font-style:normal; color:var(--brass); }
.who{ font-size:13px; color:var(--ink-3); margin:5px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.who button{ background:none; border:0; padding:0; font:inherit; color:var(--brass-2); cursor:pointer; text-decoration:underline; }
.navlink{ color:var(--brass-2); font-weight:600; text-decoration:underline; }
.navlink:hover{ color:var(--brass); }
.live{ display:inline-flex; align-items:center; gap:5px; }
.live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3); }
.live[data-on="1"]::before{ background:var(--yes); }
.quota{
  font-family:"IBM Plex Mono", monospace; font-size:11px; font-variant-numeric:tabular-nums;
  border:1px solid var(--line); border-radius:3px; padding:1px 7px; color:var(--ink-3); cursor:help;
}
.quota[data-level="low"]{ color:var(--brass-2); border-color:var(--brass); }
.quota[data-level="out"]{ color:var(--no); border-color:var(--no); font-weight:600; }

.tally{ display:flex; border:1px solid var(--line); background:var(--surface); border-radius:4px; overflow:hidden; box-shadow:var(--shadow); }
.tally div{ padding:8px 15px; display:flex; flex-direction:column; gap:1px; min-width:62px; border-right:1px solid var(--line); }
.tally div:last-child{ border-right:0; }
.tally b{ font-family:"IBM Plex Mono", monospace; font-size:19px; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums; }
.tally span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); }
.t-yes b{ color:var(--yes); }
.t-split b{ color:var(--brass); }
.t-no b{ color:var(--no); }
.t-vis b{ color:var(--brass); }

/* ---------- coming up ---------- */

.upcoming{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border:1px solid var(--line); border-left:3px solid var(--brass);
  background:var(--surface); border-radius:4px; padding:9px 13px; box-shadow:var(--shadow);
}
.up-label{ font-size:10px; text-transform:uppercase; letter-spacing:.11em; font-weight:700; color:var(--brass-2); }
.up-item{
  font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:1px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:3px; padding:4px 10px;
}
.up-item:hover{ border-color:var(--brass); }
.up-when{ font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--ink); }
.up-addr{ font-size:11.5px; color:var(--ink-3); max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-more{ font-size:12px; color:var(--ink-3); }

/* ---------- panels ---------- */

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:5px; box-shadow:var(--shadow); }
.panel-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:11px 15px; border-bottom:1px solid var(--line); }
.panel-hd h2{ margin:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-2); }
.hint{ font-size:12.5px; color:var(--ink-3); margin-left:auto; }

/* ---------- controls ---------- */

input[type=text], input[type=password], input[type=url], input[type=date], textarea{
  font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:3px; padding:6px 9px; width:100%; min-width:0;
}
input::placeholder, textarea::placeholder{ color:var(--ink-3); }
input:hover, textarea:hover{ border-color:var(--brass); }
textarea{ resize:vertical; min-height:60px; line-height:1.45; }

.btn{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:3px; padding:6px 13px;
}
.btn:hover:not(:disabled){ border-color:var(--brass); color:var(--brass-2); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.primary{ background:var(--brass); border-color:var(--brass); color:var(--on-accent); }
.btn.primary:hover:not(:disabled){ background:var(--brass-2); border-color:var(--brass-2); color:#fff; }
.btn.ghost{ background:transparent; }
.btn.small{ font-size:12px; padding:4px 9px; }

.chip{
  font:inherit; font-size:12.5px; cursor:pointer;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:99px; padding:3px 12px;
}
.chip:hover{ border-color:var(--brass); color:var(--brass-2); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:600; }

/* ---------- wish list ---------- */

.crit-body{ padding:13px 15px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crit{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:3px; padding:3px 3px 3px 9px; font-size:13px;
}
.crit[data-must="1"]{ border-color:var(--brass); background:color-mix(in oklab, var(--brass) 12%, var(--surface)); }
.crit-name{ font-weight:500; }
.crit[data-must="1"] .crit-name::after{ content:" ·  must have"; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-2); font-weight:700; }
.icon-btn{
  border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:14px; line-height:1; padding:3px 5px; border-radius:2px; font-family:inherit;
}
.icon-btn:hover{ color:var(--brass-2); background:color-mix(in oklab, var(--brass) 16%, transparent); }
.icon-btn.danger:hover{ color:var(--no); background:color-mix(in oklab, var(--no) 14%, transparent); }
.crit-add{ display:flex; gap:6px; align-items:center; }
.crit-add input{ width:160px; }

/* ---------- add a house ---------- */

.add-body{ padding:13px 15px; display:grid; gap:9px; grid-template-columns:1fr 1fr; }
.add-body .go{ grid-column:1 / -1; display:flex; gap:11px; align-items:center; flex-wrap:wrap; }
.msg{ font-size:12.5px; }
.msg[data-kind="error"]{ color:var(--no); }
.msg[data-kind="ok"]{ color:var(--yes); }
.msg[data-kind="busy"]{ color:var(--ink-3); }

/* ---------- toolbar ---------- */

.toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.toolbar .spacer{ flex:1 1 auto; }
.sortsel{ display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-3); }

/* ---------- house cards ---------- */

.list{ display:flex; flex-direction:column; gap:13px; }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:5px; box-shadow:var(--shadow); overflow:hidden;
}
.card[data-verdict="yes"]{ border-color:color-mix(in oklab, var(--yes) 45%, var(--line)); }
.card[data-verdict="split"]{ border-color:var(--brass); }
.card[data-verdict="split"] .card-top{ background:color-mix(in oklab, var(--brass) 8%, var(--surface)); }
.card[data-verdict="no"]{ opacity:.6; }
.card[data-verdict="no"]:hover, .card[data-verdict="no"]:focus-within{ opacity:1; }
.card[data-dealbreaker="1"]{ border-color:color-mix(in oklab, var(--no) 45%, var(--line)); }

.card-top{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px 18px; padding:14px 15px 13px; align-items:start; }
.card[data-verdict="yes"] .card-top{ background:color-mix(in oklab, var(--yes) 7%, var(--surface)); }
.card[data-verdict="maybe"] .card-top{ background:color-mix(in oklab, var(--maybe) 8%, var(--surface)); }
.card[data-verdict="no"] .card-top{ background:color-mix(in oklab, var(--no) 6%, var(--surface)); }

.shot{
  width:148px; height:106px; border-radius:4px; object-fit:cover;
  background:var(--surface-2); border:1px solid var(--line); display:block;
}
.shotwrap{ position:relative; width:148px; flex:0 0 auto; }
.shotwrap .shot{ cursor:pointer; }
.shot-count{
  position:absolute; bottom:5px; right:5px;
  font-family:"IBM Plex Mono", monospace; font-size:10px; font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.66); color:#fff; padding:1px 5px; border-radius:2px; pointer-events:none;
}
.shot-upload{
  position:absolute; top:5px; right:5px; font:inherit; font-size:10px; font-weight:600;
  background:rgba(0,0,0,.66); color:#fff; border:0; border-radius:2px;
  padding:2px 6px; cursor:pointer; opacity:0; transition:opacity .12s ease;
}
.shotwrap:hover .shot-upload, .shot-upload:focus-visible{ opacity:1; }
.shot-empty{
  width:148px; height:106px; border-radius:4px; border:1px dashed var(--line-2);
  background:var(--surface-2); color:var(--ink-3); font-size:11.5px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  cursor:pointer; padding:8px; line-height:1.3;
}
.shot-empty:hover{ border-color:var(--brass); color:var(--brass-2); }

.addr{
  display:block; font-family:"Bricolage Grotesque", "Public Sans", sans-serif;
  font-weight:600; font-size:19px; letter-spacing:-.015em; line-height:1.25;
  padding:1px 4px; margin:0 -4px 4px; border-radius:2px; word-break:break-word;
}
.addr:hover{ background:color-mix(in oklab, var(--brass) 12%, transparent); }
.addr:empty::before{ content:"Add the address"; color:var(--ink-3); }

.subline{ display:flex; flex-wrap:wrap; gap:5px 12px; align-items:baseline; font-size:13px; color:var(--ink-2); margin-bottom:9px; }
.subline .price{ font-family:"IBM Plex Mono", monospace; font-size:16px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.subline .dot{ color:var(--ink-3); }
.subline .src{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); border:1px solid var(--line); border-radius:2px; padding:1px 5px; }

.specs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:8px; max-width:640px; }
.f{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.fl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }

.ctrl{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.votes{ display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.voterow{ display:flex; align-items:center; gap:8px; }
.voter{
  font-size:10px; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  color:var(--ink-3); min-width:52px; text-align:right;
}
.voterow[data-mine="1"] .voter{ color:var(--brass-2); }
.verdicts{ display:flex; border:1px solid var(--line-2); border-radius:3px; overflow:hidden; }
.vb{
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--ink-2);
  border:0; border-right:1px solid var(--line-2); padding:5px 13px;
}
.vb:last-child{ border-right:0; }
.vb:hover{ background:var(--surface-2); }
.vb[data-v="yes"][data-on="1"]{ background:var(--yes); color:var(--on-accent); }
.vb[data-v="maybe"][data-on="1"]{ background:var(--maybe); color:var(--on-accent); }
.vb[data-v="no"][data-on="1"]{ background:var(--no); color:var(--on-accent); }
.vb:disabled{ cursor:default; opacity:.9; }
.vb:disabled:not([data-on="1"]):hover{ background:var(--surface); }

/* where the two of you land, jointly */
.agree{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  border:1px solid var(--line); border-radius:99px; padding:2px 9px;
  color:var(--ink-3); background:var(--surface);
}
.agree[data-k="yes"]{ color:var(--yes); border-color:color-mix(in oklab, var(--yes) 55%, var(--line)); }
.agree[data-k="no"]{ color:var(--no); border-color:color-mix(in oklab, var(--no) 50%, var(--line)); }
.agree[data-k="split"]{ color:var(--brass-2); border-color:var(--brass); background:color-mix(in oklab, var(--brass) 12%, var(--surface)); }
.agree[data-k="pending"], .agree[data-k="maybe"]{ color:var(--maybe); }

.meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.score{
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; font-variant-numeric:tabular-nums;
  color:var(--ink-2); border:1px solid var(--line); border-radius:3px; padding:3px 8px; background:var(--surface);
}
.score[data-dealbreaker="1"]{ color:var(--no); border-color:color-mix(in oklab, var(--no) 45%, var(--line)); font-weight:600; }
.open{
  font-size:12.5px; font-weight:600; color:var(--brass-2); text-decoration:none;
  border:1px solid var(--line-2); border-radius:3px; padding:3px 9px; background:var(--surface); white-space:nowrap;
}
.open:hover{ border-color:var(--brass); text-decoration:underline; }
.vis{
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:99px; padding:3px 11px;
}
.vis:hover{ border-color:var(--brass); color:var(--brass-2); }
.card[data-visited="1"] .vis{ background:var(--brass); border-color:var(--brass); color:var(--on-accent); }

/* wish-list marks inside a card */
.wants{ display:flex; flex-wrap:wrap; gap:6px; padding:11px 15px; border-top:1px solid var(--line); }
.want{
  font:inherit; font-size:12.5px; cursor:pointer;
  background:var(--surface); color:var(--ink-3);
  border:1px dashed var(--line-2); border-radius:3px; padding:3px 10px 3px 8px;
}
.want::before{ content:"–"; display:inline-block; width:13px; font-weight:700; }
.want:hover{ border-color:var(--brass); color:var(--ink); }
.want[data-val="yes"]{
  border-style:solid; font-weight:600; color:var(--yes);
  border-color:color-mix(in oklab, var(--yes) 55%, var(--line));
  background:color-mix(in oklab, var(--yes) 11%, var(--surface));
}
.want[data-val="yes"]::before{ content:"✓"; }
.want[data-val="no"]{
  border-style:solid; color:var(--no);
  border-color:color-mix(in oklab, var(--no) 45%, var(--line));
  background:color-mix(in oklab, var(--no) 9%, var(--surface));
}
.want[data-val="no"]::before{ content:"✕"; }
.want[data-must="1"]{ border-width:2px; }
.want[data-must="1"][data-val="no"]{ background:color-mix(in oklab, var(--no) 18%, var(--surface)); font-weight:700; }

/* ---------- full-size photo viewer ---------- */

.viewer{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(6,8,11,.985);
  backdrop-filter:blur(6px);
  grid-template-rows:1fr auto auto;
  align-items:center; justify-items:center; padding:16px;
}
.viewer[data-open="1"]{ display:grid; }
.viewer-img{
  grid-row:1; max-width:100%; max-height:100%;
  object-fit:contain; border-radius:4px; user-select:none;
}
.viewer-cap{
  grid-row:2; padding:10px 4px 6px;
  font-family:"IBM Plex Mono", monospace; font-size:12px;
  color:#C9D2DE; font-variant-numeric:tabular-nums; text-align:center;
}
.viewer-strip{
  grid-row:3; display:flex; gap:6px; max-width:100%; overflow-x:auto;
  padding:4px 2px 2px; scrollbar-width:thin;
}
.viewer-thumb{
  width:74px; height:54px; object-fit:cover; border-radius:3px; cursor:pointer;
  border:2px solid transparent; opacity:.5; flex:0 0 auto;
}
.viewer-thumb[data-on="1"]{ opacity:1; border-color:var(--brass); }
.viewer-thumb:hover{ opacity:.85; }

.viewer-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font:inherit; font-size:34px; line-height:1; cursor:pointer;
  background:rgba(0,0,0,.5); color:#fff; border:0; border-radius:4px;
  padding:14px 16px;
}
.viewer-nav:hover{ background:rgba(0,0,0,.78); }
.viewer-nav.prev{ left:12px; }
.viewer-nav.next{ right:12px; }
.viewer-close{
  position:absolute; top:12px; right:12px; z-index:1;
  font:inherit; font-size:17px; cursor:pointer;
  background:rgba(0,0,0,.5); color:#fff; border:0; border-radius:4px; padding:7px 11px;
}
.viewer-close:hover{ background:rgba(0,0,0,.78); }

/* ---------- listing description ---------- */

.blurb{ border-top:1px solid var(--line); background:var(--surface); padding:10px 15px; }
.blurb summary{
  cursor:pointer; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--ink-3); list-style:none;
}
.blurb summary::-webkit-details-marker{ display:none; }
.blurb summary::before{ content:"▸ "; color:var(--brass-2); }
.blurb[open] summary::before{ content:"▾ "; }
.blurb summary:hover{ color:var(--brass-2); }
.blurb-body{
  margin:9px 0 2px; font-size:13.5px; line-height:1.6; color:var(--ink-2);
  white-space:pre-wrap; max-width:78ch;
}

/* Zillow's own valuation, against the asking price */
.zest{
  font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-variant-numeric:tabular-nums;
  border:1px solid var(--line); border-radius:3px; padding:2px 7px; color:var(--ink-2);
}
.zest[data-tone="over"]{ color:var(--no); border-color:color-mix(in oklab, var(--no) 40%, var(--line)); }
.zest[data-tone="under"]{ color:var(--yes); border-color:color-mix(in oklab, var(--yes) 45%, var(--line)); }

/* visit scheduling */
.visitrow{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  padding:10px 15px; border-top:1px solid var(--line); background:var(--surface);
}
.visitrow input[type=datetime-local]{ width:auto; min-width:196px; }
.visitchip{
  font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-variant-numeric:tabular-nums;
  border:1px solid var(--brass); color:var(--brass-2);
  background:color-mix(in oklab, var(--brass) 12%, var(--surface));
  border-radius:3px; padding:3px 9px;
}
.visitchip[data-past="1"]{ border-color:var(--line); color:var(--ink-3); background:var(--surface-2); }
.visitrow .vis{ margin-left:auto; }

@keyframes flashcard{ 0%,100%{ box-shadow:var(--shadow); } 30%{ box-shadow:0 0 0 3px var(--brass); } }
.card.flash{ animation:flashcard 1.2s ease; }
@media (prefers-reduced-motion: reduce){ .card.flash{ animation:none; outline:2px solid var(--brass); } }

/* notes */
.notes{ border-top:1px solid var(--line); background:var(--surface-2); padding:11px 15px; display:flex; flex-direction:column; gap:9px; }
.note{ display:flex; gap:9px; align-items:baseline; font-size:13.5px; }
.note .author{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--brass-2); white-space:nowrap; }
.note .body{ color:var(--ink-2); white-space:pre-wrap; flex:1 1 auto; word-break:break-word; }
.note .when{ font-size:11px; color:var(--ink-3); white-space:nowrap; }
.note-add{ display:flex; gap:8px; align-items:flex-start; }
.note-add textarea{ min-height:34px; height:34px; font-size:13px; }

/* empty + misc */
.empty{ text-align:center; padding:46px 20px; color:var(--ink-3); border:1px dashed var(--line-2); border-radius:5px; }
.empty strong{ display:block; color:var(--ink-2); font-size:16px; font-weight:600; margin-bottom:4px; font-family:"Bricolage Grotesque", sans-serif; }
.banner{ padding:10px 14px; border:1px solid var(--brass); border-radius:4px; background:color-mix(in oklab, var(--brass) 12%, var(--surface)); font-size:13px; }
.foot{ font-size:12.5px; color:var(--ink-3); }
.foot summary{ cursor:pointer; font-weight:600; color:var(--ink-2); }
.foot ul{ margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; max-width:72ch; }
.hidden{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- login ---------- */

.login-page{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ width:100%; max-width:360px; display:flex; flex-direction:column; gap:14px; }
.login-card h1{ font-family:"Bricolage Grotesque", sans-serif; font-size:30px; letter-spacing:-.02em; margin:0; }
.login-card h1 em{ font-style:normal; color:var(--brass); }
.login-card p.lede{ margin:0; color:var(--ink-3); font-size:13.5px; }
.login-card form{ display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:16px; box-shadow:var(--shadow); }
.login-card label{ display:flex; flex-direction:column; gap:4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.login-card label input{ font-size:15px; padding:8px 10px; }

@media (max-width:880px){
  .card-top{ grid-template-columns:auto minmax(0,1fr); }
  .ctrl{ grid-column:1 / -1; flex-direction:row; align-items:flex-start; flex-wrap:wrap; justify-content:flex-start; gap:12px; }
  .votes{ align-items:flex-start; }
  .voter{ text-align:left; }
}

@media (max-width:600px){
  body{ padding:18px 14px 72px; }

  /* One column: the photo leads at full width, everything else beneath it. */
  .card-top{ grid-template-columns:minmax(0,1fr); }
  .shotwrap{ width:100%; }
  .shot, .shot-empty{ width:100%; height:200px; }
  .shot-upload{ opacity:1; }   /* no hover on a touchscreen */

  /* The counts strip clips its labels at this width, so let it scroll. */
  .tally{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tally div{ flex:1 0 auto; padding:8px 12px; }
  .tally span{ font-size:9.5px; letter-spacing:.06em; }

  /* Section hints belong under the heading on a phone, not shoved to the right. */
  .panel-hd{ gap:4px 12px; }
  .hint{ margin-left:0; flex-basis:100%; }

  .specs{ grid-template-columns:1fr 1fr; }
  .verdicts{ flex:1 1 auto; }
  .vb{ flex:1 1 0; padding:7px 8px; }

  .visitrow input[type=datetime-local]{ min-width:0; flex:1 1 auto; }
  .visitrow .vis{ margin-left:0; }

  .up-addr{ max-width:60vw; }
  .viewer{ padding:8px; }
  .viewer-nav{ font-size:26px; padding:10px 12px; }
  .viewer-thumb{ width:58px; height:42px; }
  .viewer-cap{ font-size:11px; }
  .note-add{ flex-direction:column; align-items:stretch; }
  .note-add .btn{ align-self:flex-end; }
}

@media (prefers-reduced-motion: no-preference){
  .btn, .chip, .want, .vb, .vis, .icon-btn{ transition:background-color .12s ease, border-color .12s ease, color .12s ease; }
}