/* Hawley Team property search.
   Palette and faces continue the holding page already written for this project.

   ONE RULE HERE IS CONTRACTUAL, NOT AESTHETIC.

   FGCMLS 19.17 requires the listing firm and agent to appear in a readily
   visible colour, in a prominent location, in a typeface not smaller than the
   MEDIAN typeface used for the listing data. On a card the listing data runs
   26px price, 16px address, 14px specs, so the median is 16px. Attribution is
   therefore 16px and takes --ink-2, not a grey. It is not fine print and must
   never be made into fine print. See --attrib-size below. */

:root{
  --ink:#12212C; --ink-2:#3E5468; --ink-3:#6E8497;
  --paper:#FCFDFD; --card:#FFFFFF; --line:#DCE5EB; --rail:#EFF4F7;
  --accent:#0F6E8C; --accent-2:#0B5468;
  --good:#256B4F; --good-bg:#E8F3ED;
  --warn:#8A6410; --warn-bg:#FBF3E2;
  --bad:#A8401E;  --bad-bg:#FBEDE8;
  --shadow:0 1px 2px rgba(18,33,44,.05), 0 8px 24px -16px rgba(18,33,44,.28);
  --attrib-size:16px;      /* 19.17. Do not reduce. */
  --radius:11px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ink:#E9F0F5; --ink-2:#AABDCB; --ink-3:#7C93A6;
  --paper:#0D151C; --card:#13202A; --line:#25353F; --rail:#182530;
  --accent:#66C6E0; --accent-2:#8FD9EC;
  --good:#79CFAA; --good-bg:#12271F;
  --warn:#E0B65E; --warn-bg:#2A2113;
  --bad:#F0947A;  --bad-bg:#2B1913;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.7);
} }
:root[data-theme="dark"]{
  --ink:#E9F0F5; --ink-2:#AABDCB; --ink-3:#7C93A6;
  --paper:#0D151C; --card:#13202A; --line:#25353F; --rail:#182530;
  --accent:#66C6E0; --accent-2:#8FD9EC;
  --good:#79CFAA; --good-bg:#12271F;
  --warn:#E0B65E; --warn-bg:#2A2113;
  --bad:#F0947A;  --bad-bg:#2B1913;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,sans-serif; letter-spacing:-.02em; text-wrap:balance; margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
[hidden]{display:none !important}

/* ------------------------------------------------------------------ chrome */
header.top{
  position:sticky; top:0; z-index:40; background:var(--card);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:16px; padding:12px 20px;
}
.brand{font-family:Archivo,sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand span{color:var(--accent)}
.top nav{margin-left:auto; display:flex; align-items:center; gap:6px}

button,.btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:9px;
  border:1px solid transparent; padding:9px 16px; background:var(--accent);
  color:#fff; transition:background .15s,border-color .15s;
}
/* Dark text for buttons that sit on the light accent fill.
 *
 * Scoped, because this used to say "every button". A .chip IS a button, and an
 * unselected chip's background is --paper, which in dark mode is #0D151C, the
 * very colour this sets the text to. The filter rail went black on black: the
 * city names, the bed and bath numbers and the property types all vanished
 * while the one selected chip stayed readable. Reported 30 Aug 2026.
 *
 * The specificity here (0,2,1) also beat .chip, button.ghost and button.quiet,
 * so those lost their own colours too. Excluding them by name fixes all four. */
:root[data-theme="dark"] button:not(.chip):not(.ghost):not(.quiet),
:root[data-theme="dark"] .btn:not(.chip):not(.ghost):not(.quiet){color:#0D151C}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) button:not(.chip):not(.ghost):not(.quiet),
  :root:not([data-theme="light"]) .btn:not(.chip):not(.ghost):not(.quiet){color:#0D151C} }
button:hover,.btn:hover{background:var(--accent-2)}
button.ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
button.ghost:hover{background:var(--rail); color:var(--ink)}
button.quiet{background:transparent; color:var(--accent); border-color:transparent; padding:9px 10px}
button.quiet:hover{background:var(--rail)}
button:disabled{opacity:.5; cursor:not-allowed}

/* ------------------------------------------------------------------- gate */
/* 19.3: nothing about a listing is visible until this is satisfied. */
.gate{max-width:560px; margin:0 auto; padding:48px 24px 80px}
.gate h1{font-size:clamp(28px,5vw,38px); line-height:1.08; margin-bottom:12px}
.gate .lede{color:var(--ink-2); font-size:18px; margin:0 0 28px}
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow);
}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:15px}
.field label{font-size:14px; font-weight:600; color:var(--ink-2)}
.field .hint{font-size:13.5px; color:var(--ink-3)}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],select{
  font:inherit; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper); color:var(--ink); width:100%;
}
input:focus,select:focus{border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .row2{grid-template-columns:1fr} }

/* Terms of Use. 19.3(d) needs six affirmative agreements, and they have to be
   readable rather than a wall the eye slides off. */
.tou{border:1px solid var(--line); border-radius:var(--radius);
  background:var(--rail); padding:4px 16px; margin:6px 0 18px}
.agree{display:flex; gap:11px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--line); font-size:15px; color:var(--ink-2)}
.agree:last-child{border-bottom:0}
.agree input{margin-top:4px; width:17px; height:17px; accent-color:var(--accent); flex:none}
.consent{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--card); border-radius:0 8px 8px 0; padding:14px 16px; margin:6px 0 18px;
  font-size:13.5px; line-height:1.55; color:var(--ink-2);
}
.note-plain{font-size:14px; color:var(--ink-3); margin:0 0 18px}
.msg{border-radius:8px; padding:11px 14px; font-size:15px; margin:0 0 16px}
.msg.err{background:var(--bad-bg); color:var(--bad)}
.msg.ok{background:var(--good-bg); color:var(--good)}
.switcher{margin-top:18px; font-size:15px; color:var(--ink-3); text-align:center}
.switcher button{padding:2px 4px}

/* ----------------------------------------------------------------- search */
.shell{display:grid; grid-template-columns:290px 1fr; min-height:calc(100vh - 57px)}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  aside.filters{position:fixed; inset:57px 0 0; z-index:30; overflow-y:auto;
    background:var(--paper); transform:translateX(-100%); transition:transform .2s}
  aside.filters.open{transform:none}
}
aside.filters{
  border-right:1px solid var(--line); background:var(--card);
  padding:20px; overflow-y:auto; max-height:calc(100vh - 57px); position:sticky; top:57px;
}
aside h2{font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 14px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-size:14px; padding:6px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-2);
  font-weight:500;
}
.chip[aria-pressed=true]{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .chip[aria-pressed=true]{color:#0D151C}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"])
  .chip[aria-pressed=true]{color:#0D151C} }

main.results{padding:22px 24px 60px; min-width:0}
.resbar{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.resbar h1{font-size:21px}
.resbar .count{color:var(--ink-3); font-size:15px; font-variant-numeric:tabular-nums}
.capnote{
  background:var(--warn-bg); color:var(--warn); border-radius:8px;
  padding:9px 13px; font-size:14px; margin:0 0 16px;
}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  cursor:pointer; transition:transform .12s, box-shadow .12s;
}
.card:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(18,33,44,.07),0 14px 32px -18px rgba(18,33,44,.4)}
.card .ph{aspect-ratio:4/3; background:var(--rail); position:relative; overflow:hidden}
.card .ph img{width:100%; height:100%; object-fit:cover; display:block}
.card .ph .none{position:absolute; inset:0; display:grid; place-items:center;
  color:var(--ink-3); font-size:14px}
.status{
  position:absolute; top:10px; left:10px; font-size:12px; font-weight:600;
  font-family:Archivo,sans-serif; letter-spacing:.03em; padding:4px 9px;
  border-radius:999px; background:var(--card); color:var(--ink-2); border:1px solid var(--line);
}
.status.pending{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.status.sold{background:var(--rail); color:var(--ink-2); border-color:transparent}
.fav{
  position:absolute; top:8px; right:8px; background:var(--card); border:1px solid var(--line);
  width:34px; height:34px; padding:0; border-radius:50%; display:grid; place-items:center;
  font-size:15px; color:var(--ink-3);
}
.fav[aria-pressed=true]{color:var(--bad); border-color:var(--bad)}
.card .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:5px; flex:1}
.price{font-family:Archivo,sans-serif; font-weight:700; font-size:26px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.addr{font-size:16px; color:var(--ink); line-height:1.35}
.addr .muni{color:var(--ink-3)}
.specs{font-size:14px; color:var(--ink-2); display:flex; gap:10px; flex-wrap:wrap}
.specs b{font-weight:600; color:var(--ink)}

/* 19.17 attribution. Same size as the address line, real colour, above the fold
   of the card rather than tucked under it. Do not shrink. */
.attrib{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--line);
  font-size:var(--attrib-size); line-height:1.35; color:var(--ink-2);
}

/* ----------------------------------------------------------------- detail */
.sheet{position:fixed; inset:0; z-index:60; background:rgba(10,18,24,.55);
  display:flex; justify-content:center; align-items:flex-start; overflow-y:auto; padding:24px}
.sheet-inner{background:var(--paper); border-radius:14px; max-width:940px; width:100%;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.5); overflow:hidden}
.sheet-head{display:flex; align-items:center; gap:12px; padding:14px 20px;
  border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:2}
.sheet-head h2{font-size:18px; flex:1; min-width:0}
.gallery{display:grid; gap:3px; grid-template-columns:2fr 1fr 1fr; background:var(--rail)}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; max-height:340px}
.gallery img:first-child{grid-row:span 2; max-height:683px}
@media (max-width:620px){ .gallery{grid-template-columns:1fr}
  .gallery img:first-child{grid-row:auto} .gallery img:nth-child(n+4){display:none} }
.sheet-body{padding:22px 24px 30px}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:0 0 22px}
.facts div{background:var(--card); padding:12px 14px}
.facts dt{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:3px}
.facts dd{margin:0; font-family:Archivo,sans-serif; font-weight:600; font-size:17px;
  font-variant-numeric:tabular-nums}
.remarks{max-width:68ch; color:var(--ink-2); margin:0 0 22px; white-space:pre-wrap}

/* 19.4: a consumer must be able to ask about any property displayed. */
.ask{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:0 0 20px; display:flex; gap:16px; align-items:center;
  flex-wrap:wrap; box-shadow:var(--shadow);
}
.ask p{margin:0; flex:1; min-width:200px; font-size:15.5px; color:var(--ink-2)}
.ask strong{color:var(--ink); display:block; font-family:Archivo,sans-serif; font-size:16px}

/* Attribution on the detail page, larger because the listing data is larger. */
.attrib-detail{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--rail);
  padding:14px 18px; font-size:17px; color:var(--ink-2); margin:0 0 18px;
}

/* ------------------------------------------------------------- disclaimer */
/* 19.18. Present wherever listing data is, not only on a legal page. */
footer.mls{
  border-top:1px solid var(--line); background:var(--card);
  padding:22px 24px 34px; font-size:13px; line-height:1.6; color:var(--ink-3);
}
footer.mls .in{max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:9px}
footer.mls strong{color:var(--ink-2); font-weight:600}
.sheet-body footer.mls{border:0; background:transparent; padding:18px 0 0; margin-top:8px;
  border-top:1px solid var(--line)}

.empty{text-align:center; padding:70px 20px; color:var(--ink-3)}
.empty h2{font-size:20px; color:var(--ink); margin-bottom:8px}
.spinner{width:22px; height:22px; border:2.5px solid var(--line);
  border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;
  margin:50px auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---- Terms of Use, one provision -----------------------------------------
   19.3(d) asks that the terms be REVIEWED and then affirmatively agreed. So
   they stay on the page and readable rather than behind a link, but set at a
   size that does not swamp a four-field form. The submit button carries the
   agreement. */
.terms-block{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--rail); padding:15px 17px; margin:0 0 16px;
}
.terms-block h3{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 8px;
}
.terms-block p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0}
.terms-block .terms-notice{margin-top:9px; color:var(--ink); font-weight:600}

/* TCPA opt-in. Separate from the terms by law, not by preference: Florida's
   FTSA treats consent buried in general terms as no consent, and it may not be
   a condition of the service. Unchecked by default, always. */
.tcpa-opt{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin:0 0 18px; background:var(--card);
}
.tcpa-opt:hover{border-color:var(--accent)}
.tcpa-opt input{margin-top:3px; width:17px; height:17px; accent-color:var(--accent); flex:none}
.tcpa-opt b{display:block; font-size:15px; color:var(--ink); font-weight:600; margin-bottom:4px}
.tcpa-fine{display:block; font-size:12px; line-height:1.5; color:var(--ink-3)}

/* ---- saved searches + pagination ---------------------------------------- */
.saved-list{display:flex; flex-direction:column; gap:6px; margin-bottom:22px}
.saved{
  display:flex; align-items:center; gap:8px; padding:9px 11px;
  border:1px solid var(--line); border-radius:9px; background:var(--paper);
  font-size:14px; cursor:pointer;
}
.saved:hover{border-color:var(--accent)}
.saved .nm{flex:1; min-width:0; color:var(--ink); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.saved .freq{font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.saved .del{
  background:transparent; border:0; color:var(--ink-3); padding:2px 5px;
  font-size:16px; line-height:1; border-radius:5px;
}
.saved .del:hover{background:var(--bad-bg); color:var(--bad)}

.pager{display:flex; align-items:center; justify-content:center; gap:14px; margin:30px 0 10px}
.pager span{font-size:14.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.save-panel{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:14px; margin-top:10px; box-shadow:var(--shadow);
}
.save-panel select{width:100%}

.share-panel{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:16px 18px; margin:0 0 20px; box-shadow:var(--shadow);
}