/* ============================================================
   Halstead Auto Service — mechanical repair demo template
   Identity: "Posted Prices". See halstead-brand.md for the record.
   Sibling to collision-shop-template, deliberately not a recolor:
   different centerpiece (a searchable price board), different
   structure, different palette and type.
   Light source: overhead shop fluorescents, front-left.
   Shadows are tinted to their ground, never rgba(0,0,0,a).
   ============================================================ */

:root{
  /* ground — near-white with a faint green cast */
  --paper:hsl(150 8% 96%);
  --paper-2:hsl(152 10% 92%);
  --paper-3:hsl(152 9% 85%);
  --card:hsl(150 14% 99%);
  /* ink — deep green-black */
  --ink:hsl(170 22% 11%);
  --ink-2:hsl(172 8% 36%);
  --ink-3:hsl(172 7% 52%);
  /* action */
  --signal:hsl(187 82% 26%);
  --signal-deep:hsl(187 84% 20%);
  --signal-wash:hsl(187 54% 94%);
  /* highlight — a GROUND only. Yellow cannot carry light type at any size. */
  --hi:hsl(46 96% 52%);
  --hi-deep:hsl(42 92% 46%);
  --warn:hsl(24 88% 44%);
  --go:hsl(150 68% 30%);
  /* depth */
  --sh-near:5px 8px 18px -6px hsl(170 24% 16% / .24), 1px 2px 4px hsl(170 20% 16% / .14);
  --sh-far:20px 30px 56px -18px hsl(170 28% 12% / .32), 3px 6px 14px -6px hsl(170 22% 16% / .16);
  --sh-press:2px 3px 6px -2px hsl(170 24% 16% / .28);
  --r:4px;
  --pad:clamp(52px,7vw,92px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Saira Condensed",Impact,"Arial Narrow",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:1}
p{margin:0 0 1em}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
ul,ol{list-style:none;margin:0;padding:0}
:focus-visible{outline:3px solid var(--focus,var(--signal));outline-offset:3px;border-radius:2px}
.board,.rights,.find,.foot,.callbar{--focus:hsl(46 96% 60%)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-weight:700;text-decoration:none}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#board,#rights,#diagnose,#shop,#book,#find{scroll-margin-top:96px}

/* ---------- section heads ---------- */
.head{max-width:50ch;margin-bottom:clamp(28px,3.4vw,44px)}
.kicker{display:block;font:800 12.5px/1 Manrope,sans-serif;letter-spacing:.13em;
  color:var(--signal);margin-bottom:13px}
h2{font-size:clamp(31px,4.2vw,50px)}
.head p{font-size:18.5px;line-height:1.5;color:var(--ink-2);margin:15px 0 0}

/* ---------- utility bar ---------- */
.util{background:var(--ink);color:hsl(150 10% 86%);font-size:13.5px}
.util .wrap{display:flex;gap:8px 22px;align-items:center;justify-content:space-between;min-height:38px;flex-wrap:wrap}
.util b{color:var(--paper);font-weight:700}
.open{display:inline-flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:hsl(140 66% 52%);box-shadow:0 0 0 3px hsl(140 66% 52%/.25);flex:none}
.dot.shut{background:var(--ink-3);box-shadow:0 0 0 3px hsl(172 7% 52%/.22)}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:40;background:hsl(150 8% 96% / .94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--paper-2)}
.mast .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{text-decoration:none;flex:none;display:inline-flex;flex-direction:column;justify-content:center;min-height:44px}
.logo .wordmark{display:block;white-space:nowrap;font-family:"Saira Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;font-size:26px;line-height:1}
.logo .wordmark em{font-style:normal;color:var(--signal)}
.logo small{display:block;font:700 9.5px/1 Manrope,sans-serif;letter-spacing:.2em;color:var(--ink-2);margin-top:5px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:700}
.nav a{text-decoration:none;padding:7px 0;border-bottom:2px solid transparent;
  min-height:44px;display:inline-flex;align-items:center;transition:border-color .12s}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--hi-deep)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Manrope,sans-serif;font-weight:800;font-size:16px;line-height:1;
  padding:15px 22px;border-radius:var(--r);text-decoration:none;border:2px solid transparent;
  cursor:pointer;min-height:48px;transition:background .12s,color .12s,box-shadow .12s,transform .06s}
.btn-1{background:var(--signal);color:hsl(150 14% 99%);box-shadow:var(--sh-near)}
.btn-1:hover{background:var(--signal-deep)}
.btn-1:active{box-shadow:var(--sh-press);transform:translateY(2px)}
.btn-2{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-2:hover{background:var(--ink);color:var(--paper)}
.btn-2:active{transform:translateY(2px)}
/* the yellow control: a ground, with ink type on it */
.btn-hi{background:var(--hi);color:var(--ink);box-shadow:var(--sh-near)}
.btn-hi:hover{background:var(--hi-deep)}
.btn-hi:active{box-shadow:var(--sh-press);transform:translateY(2px)}
.mast .btn{padding:12px 18px;font-size:15px;min-height:44px}
.acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- hero: search-forward, not image-forward ---------- */
.hero{padding:clamp(36px,4.4vw,56px) 0 clamp(48px,5.4vw,72px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,54px);align-items:stretch}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--hi);color:var(--ink);
  font:800 12.5px/1 Manrope,sans-serif;letter-spacing:.07em;padding:8px 12px;border-radius:2px;margin-bottom:20px}
h1{font-size:clamp(42px,5.6vw,76px);line-height:.96}
h1 .sm{display:block;font-size:.46em;color:var(--ink-2);line-height:1.08;margin-top:14px}
.lede{font-size:19px;line-height:1.5;color:var(--ink-2);max-width:46ch;margin:20px 0 26px}
.lede b{color:var(--ink);font-weight:700}
.micro{margin:18px 0 0;font-size:14.5px;color:var(--ink-2)}
.micro b{color:var(--ink);font-weight:700}

/* the price search — the page's primary action */
.ask{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  padding:18px 18px 16px;box-shadow:var(--sh-far)}
.ask label{display:block;font-family:"Saira Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;font-size:23px;line-height:1;margin-bottom:5px}
.ask .sub{font-size:14.5px;color:var(--ink-2);margin:0 0 14px}
.ask .row{display:flex;gap:9px}
.ask input{flex:1;min-width:0;font:400 16.5px/1.4 Manrope,sans-serif;color:var(--ink);
  background:var(--paper);border:2px solid var(--paper-3);border-radius:var(--r);
  padding:13px 14px;min-height:52px;transition:border-color .12s}
.ask input:hover{border-color:var(--ink-3)}
.ask input:focus{border-color:var(--signal);outline:3px solid var(--signal);outline-offset:1px}
.ask .btn{min-height:52px;padding:15px 20px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.chip{font:700 13.5px/1 Manrope,sans-serif;background:var(--paper-2);color:var(--ink);
  border:1px solid var(--paper-3);border-radius:100px;padding:9px 13px;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;transition:background .12s,border-color .12s}
.chip:hover{background:var(--hi);border-color:var(--hi-deep)}

.shot{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-far);
  border:6px solid var(--card);background:var(--paper-2)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hero .shot{align-self:stretch}
.hero .shot img{aspect-ratio:auto;min-height:460px}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 15px 13px;
  background:linear-gradient(to top,hsl(170 30% 7% / .94) 26%,hsl(170 30% 7% / .8) 58%,hsl(170 30% 7% / 0));
  color:hsl(150 12% 96%);font-size:14px;line-height:1.4}
.shot figcaption b{display:block;font-weight:800;font-size:15.5px;margin-bottom:2px}

/* ---------- the board: the centerpiece ---------- */
.board{background:var(--ink);color:hsl(150 10% 90%);padding:var(--pad) 0}
.board h2{color:var(--paper)}
.board .head p{color:hsl(150 8% 68%)}
.board .kicker{color:var(--hi)}
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.filter input{flex:1 1 320px;min-width:0;font:400 16.5px/1.4 Manrope,sans-serif;color:var(--paper);
  background:hsl(172 18% 16%);border:2px solid hsl(172 14% 26%);border-radius:var(--r);
  padding:13px 14px;min-height:52px;transition:border-color .12s}
.filter input::placeholder{color:hsl(172 7% 56%)}
.filter input:hover{border-color:hsl(172 12% 38%)}
.filter input:focus{border-color:var(--hi)}
.count{font:700 14px/1 Manrope,sans-serif;color:hsl(150 8% 66%);white-space:nowrap}
.count b{color:var(--hi)}
.clear{background:none;border:0;color:hsl(150 10% 82%);font:700 14px Manrope,sans-serif;
  text-decoration:underline;cursor:pointer;min-height:44px;padding:0 6px}
.clear:hover{color:var(--hi)}

.rate{border-top:1px solid hsl(172 14% 22%)}
.rate li{border-bottom:1px solid hsl(172 14% 22%)}
.rate .job{display:grid;grid-template-columns:1fr auto;gap:2px 28px;
  grid-template-areas:"cat price" "name price" "note price";
  padding:16px 0 16px 16px;border-left:3px solid transparent;transition:border-color .12s,background .12s}
.rate li:hover .job,.rate li:focus-within .job{border-left-color:var(--hi);background:hsl(172 18% 15%)}
.rate .name{grid-area:name;font-size:17px;font-weight:700;color:var(--paper);margin-bottom:4px}
.rate .note{grid-area:note;font-size:14.5px;color:hsl(150 8% 66%);line-height:1.45;max-width:62ch}
.rate .price{grid-area:price;align-self:center;justify-self:end;font-size:23px;font-weight:800;
  color:var(--hi);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}
.rate .price small{display:block;font-size:12px;font-weight:700;color:hsl(150 8% 62%);
  text-align:right;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.rate .cat{grid-area:cat;justify-self:start;font:800 10.5px/1 Manrope,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:hsl(187 52% 70%);margin-bottom:6px}
.empty{padding:34px 16px;color:hsl(150 8% 70%);font-size:16.5px;border-bottom:1px solid hsl(172 14% 22%)}
.empty b{color:var(--paper)}
.board-note{margin:24px 0 0;font-size:14.5px;color:hsl(150 8% 66%);max-width:74ch;line-height:1.55}
.board-note b{color:var(--paper)}

/* ---------- rights: yellow ground, ink type ---------- */
.rights{background:var(--hi);color:var(--ink);padding:var(--pad) 0}
.rights .kicker{color:hsl(26 94% 22%)}
.rights .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.6vw,52px);align-items:start}
.rights p{font-size:18px;line-height:1.55;max-width:52ch}
.rights .lede2{font-size:19.5px;font-weight:600}
.promises li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 0;
  border-top:1px solid hsl(46 70% 42% / .45)}
.promises li:last-child{border-bottom:1px solid hsl(46 70% 42% / .45)}
.promises .n{font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:19px;
  color:hsl(26 94% 22%);line-height:1.3}
.promises b{display:block;font-size:17px;font-weight:800;margin-bottom:3px}
.promises span{font-size:15.5px;line-height:1.45;color:hsl(170 24% 20%)}
.cite{margin-top:22px;background:var(--ink);color:hsl(150 10% 88%);border-radius:var(--r);
  padding:18px 20px;font-size:14.5px;line-height:1.6}
.cite b{display:block;font:800 12.5px/1 Manrope,sans-serif;letter-spacing:.08em;
  color:var(--hi);margin-bottom:8px}
.cite a{color:hsl(187 52% 72%);display:inline-flex;align-items:center;min-height:44px}

/* ---------- diagnostics ---------- */
.diag{padding:var(--pad) 0}
.codes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.codes li{background:var(--card);border:1px solid var(--paper-2);border-left:4px solid var(--signal);
  border-radius:var(--r);padding:20px 20px 18px;box-shadow:var(--sh-near)}
.codes .code{font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:25px;
  letter-spacing:.02em;line-height:1;margin-bottom:8px}
.codes b{display:block;font-size:16px;font-weight:800;margin-bottom:5px}
.codes p{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0}
.codes .cost{display:inline-block;margin-top:11px;background:var(--paper-2);border-radius:100px;
  padding:6px 12px;font:800 13px/1 Manrope,sans-serif;font-variant-numeric:tabular-nums}
.diag-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.6vw,52px);align-items:center}

/* ---------- the shop ---------- */
.shop{background:var(--paper-2);padding:var(--pad) 0}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gal li{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-3);
  box-shadow:var(--sh-near)}
.gal figure{margin:0;height:100%}
.gal img{display:block;width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:42px 15px 13px;
  background:linear-gradient(to top,hsl(170 30% 7% / .94) 26%,hsl(170 30% 7% / .82) 58%,hsl(170 30% 7% / 0));
  color:hsl(150 14% 96%)}
.gal b{display:block;font-size:15.5px;font-weight:800;line-height:1.3}
.gal span{display:block;font-size:13.5px;color:hsl(150 12% 86%);margin-top:3px}
.g-lg{grid-column:span 6;aspect-ratio:3/2}
.g-sm{grid-column:span 3}
.g-wd{grid-column:span 6;aspect-ratio:3/2}
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.creds li{background:var(--card);border:1px solid var(--paper-3);border-radius:var(--r);padding:18px 18px 16px}
.creds b{display:block;font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:21px;
  text-transform:uppercase;margin-bottom:4px}
.creds span{font-size:14.5px;color:var(--ink-2);line-height:1.4}

/* ---------- booking form ---------- */
.book{padding:var(--pad) 0}
.book .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,56px);align-items:start}
.why li{position:relative;padding:0 0 0 30px;margin-bottom:15px;font-size:16.5px;color:var(--ink-2);line-height:1.45}
.why li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:10px;
  border-left:3px solid var(--go);border-bottom:3px solid var(--go);transform:rotate(-45deg)}
.why b{color:var(--ink);font-weight:800}
.instead{margin:32px 0 0;background:var(--card);border:1px solid var(--paper-2);
  border-left:4px solid var(--ink);border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh-near)}
.instead h3{font-size:23px;margin-bottom:8px}
.instead p{font-size:16px;color:var(--ink-2);margin:0 0 12px}
.instead .tel{font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:31px;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;line-height:1}
.instead .tel:hover{color:var(--signal)}
.instead small{display:block;color:var(--ink-2);font-size:14px;margin-top:6px}

form{background:var(--card);border:1px solid var(--paper-2);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);box-shadow:var(--sh-far)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:17px}
label{display:block;font-weight:800;font-size:14.5px;margin-bottom:7px}
label .opt{font-weight:400;color:var(--ink-3)}
input,select,textarea{width:100%;font:400 16px/1.4 Manrope,sans-serif;color:var(--ink);
  background:var(--paper);border:2px solid var(--paper-3);border-radius:var(--r);
  padding:13px 14px;min-height:50px;transition:border-color .12s}
textarea{min-height:104px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{border-color:var(--signal);outline:3px solid var(--signal);outline-offset:1px}
.hint{font-size:13.5px;color:var(--ink-2);margin:7px 0 0}
.err{display:none;color:hsl(2 72% 38%);font-size:14px;font-weight:700;margin:7px 0 0}
.f.bad input,.f.bad select{border-color:hsl(2 72% 44%)}
.f.bad .err{display:block}
form .btn-1{width:100%;margin-top:6px}
.priv{font-size:13.5px;color:var(--ink-2);margin:14px 0 0}
.sent{display:none;background:hsl(150 44% 94%);border:2px solid var(--go);border-radius:var(--r);padding:22px}
.sent h3{font-size:23px;color:hsl(150 68% 20%);margin-bottom:8px}
.sent p{font-size:16px;color:hsl(150 30% 22%);margin:0}

/* ---------- find ---------- */
.find{background:var(--ink);color:hsl(150 10% 86%);padding:var(--pad) 0}
.find h2{color:var(--paper)}
.find .kicker{color:var(--hi)}
.find .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.6vw,52px);align-items:start}
.addr{font-size:19px;line-height:1.5;color:var(--paper);margin:0 0 20px}
.addr a{color:var(--hi);display:inline-flex;align-items:center;min-height:44px}
.hours{margin:24px 0 0;max-width:400px}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid hsl(172 14% 22%);font-size:16px}
.hours li.now{color:var(--paper);font-weight:800}
.hours dfn{font-style:normal}
.map{border-radius:var(--r);overflow:hidden;border:1px solid hsl(172 14% 22%);background:hsl(172 18% 16%)}
.map iframe{display:block;border:0;width:100%}
.map .bar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:8px 18px;font-size:14.5px;border-top:1px solid hsl(172 14% 22%);min-height:56px}
.map .bar a{display:inline-flex;align-items:center;min-height:44px;color:var(--hi)}

/* ---------- footer ---------- */
.foot{background:hsl(172 24% 8%);color:hsl(150 8% 62%);padding:44px 0 32px;font-size:14.5px}
.foot .wrap{display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.foot a{color:hsl(150 10% 84%)}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.foot ul{line-height:2}
.foot h3{font:800 12px/1 Manrope,sans-serif;letter-spacing:.1em;color:hsl(150 8% 74%);margin:0 0 10px}
.foot .logo .wordmark{color:var(--paper);font-size:22px}
.foot .logo{min-height:0;margin-bottom:12px}
.demo{margin-top:32px;padding-top:22px;border-top:1px solid hsl(172 16% 16%);font-size:13.5px;line-height:1.6;flex:1 1 100%}
.demo b{color:hsl(150 10% 84%)}

/* ---------- persistent action band ---------- */
.callbar{display:none}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .codes{grid-template-columns:1fr 1fr}
  .creds{grid-template-columns:1fr 1fr}
  .g-sm{grid-column:span 6;aspect-ratio:3/2}
}
@media(max-width:900px){
  .hero .wrap,.rights .wrap,.diag-split,.book .wrap,.find .wrap{grid-template-columns:1fr}
  .nav{display:none}
  .hero .wrap{gap:32px}
}
@media(max-width:640px){
  .codes{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px;padding-bottom:76px}
  .util .wrap{min-height:34px;font-size:12.5px}
  .util .addr-u{display:none}
  h1{font-size:clamp(35px,10.2vw,50px)}
  .lede{font-size:17px;margin:16px 0 22px}
  .acts .btn{flex:1 1 100%}
  .ask{padding:16px 15px 15px}
  .ask .row{flex-direction:column}
  .ask .btn{width:100%}
  .g-lg,.g-sm,.g-wd{grid-column:span 12;aspect-ratio:16/10}
  .rate .job{grid-template-columns:1fr;grid-template-areas:"cat" "name" "note" "price";padding-left:13px}
  .rate .price{justify-self:start;align-self:start;margin-top:9px}
  .rate .price small{display:inline;text-align:left;margin-right:7px}
  .hero .shot img{min-height:0;aspect-ratio:16/10}
  .f-row{grid-template-columns:1fr;gap:0}
  .promises li{grid-template-columns:22px 1fr;gap:11px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px;
    box-shadow:0 -6px 18px -8px hsl(170 28% 10% / .5)}
  .callbar .btn{flex:1;min-height:52px;font-size:15.5px}
  .callbar .btn-2{color:var(--paper);border-color:hsl(172 12% 40%)}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .btn:active{transform:none}
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

#rates{overflow-anchor:none}#boardInput:focus-visible{outline:3px solid #ffcf00;outline-offset:4px}