/* Tester feedback form. Loaded only by the hidden /testers/ pages. Everything is
   scoped under .tf / .tf-layout because site.css styles bare input, textarea and
   form for the dark contact band, and those global rules must not leak in here. */
.tf-badge{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--meta);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.tf-layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.tf{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:20px}
.tf .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;display:flex;flex-direction:column;gap:18px}
.tf .step{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tf .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tf .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tf .fld{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.tf .fld small{font-weight:400;color:var(--body);font-size:12.5px}
.tf .fld input[type=text],.tf .fld input[type=email],.tf .fld select,.tf .fld textarea{font:400 14px/1.45 var(--ui);color:var(--ink);background:#fff;border:1px solid #CBD2DE;border-radius:9px;padding:10px 12px;min-height:44px;box-sizing:border-box;width:100%}
.tf .fld textarea{min-height:96px;resize:vertical}
.tf .fld textarea.tall{min-height:130px}
.tf .fld input:focus,.tf .fld select:focus,.tf .fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,127,140,.14)}
.tf .mono{font-family:var(--mono)!important;font-size:13px}
.tf .req{color:#C2272F;font-weight:600}
.tf .hint{font-size:12.5px;color:var(--body);margin:0}
.tf .chips{display:flex;flex-wrap:wrap;gap:8px}
.tf .chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #CBD2DE;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:500;min-height:36px;box-sizing:border-box;background:#fff;cursor:pointer}
.tf .chip input{margin:0;width:auto;accent-color:#0B7F8C}
.tf .nps{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px}
.tf .nps .chip{justify-content:center;padding:8px 0;font-family:var(--mono);gap:4px}
.tf .scale{display:grid;grid-template-columns:200px repeat(5,minmax(0,1fr)) 90px;align-items:center;gap:6px;font-size:13px;padding:8px 0;border-top:1px solid var(--hair)}
.tf .scale .aname{font-weight:600}
.tf .scale label{display:flex;justify-content:center;align-items:center;min-height:36px;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:12px;color:var(--body);cursor:pointer;position:relative}
.tf .scale label input{position:absolute;opacity:0;width:1px;height:1px}
.tf .scale label.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tf .scale label:focus-within,.tf .nps .chip:focus-within,.tf .chip:focus-within{box-shadow:0 0 0 3px rgba(11,127,140,.3)}
.tf .seg{display:inline-flex;align-self:flex-start;border:1px solid #CBD2DE;border-radius:11px;padding:4px;background:#fff;gap:4px}
.tf .seg button{font:600 14px var(--ui);border:0;border-radius:8px;padding:10px 18px;min-height:44px;background:transparent;color:var(--body);cursor:pointer}
.tf .seg button.on{background:var(--ink);color:#fff}
.tf .tf-part{display:flex;flex-direction:column;gap:20px}
.tf .tf-part[hidden]{display:none}
/* .card and .choices set display, which beats the hidden attribute */
[hidden]{display:none !important}
.tf .checks{display:flex;flex-direction:column;gap:10px;font-size:14px}
.tf .checks label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.tf .checks input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:#0B7F8C}
.tf .checks a{color:var(--accent)}
.tf .submitrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.tf .submitrow .btn{margin-left:auto}
.tf .formnote{color:var(--body);font-size:13px;margin:0}
.tf .formnote.err{color:#C2272F}
.tf-layout .side{display:flex;flex-direction:column;gap:16px;flex:1 1 280px;min-width:0}
.tf-layout .tip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;font-size:13.5px;line-height:1.55;color:var(--body)}
.tf-layout .tip b{color:var(--ink)}
.tf-layout .tip ol,.tf-layout .tip ul{margin:8px 0 0;padding-left:18px}
@media (max-width:760px){
  .tf .grid2,.tf .grid3{grid-template-columns:minmax(0,1fr)}
  .tf .scale{grid-template-columns:minmax(0,1fr) repeat(5,36px)}
  .tf .scale .aname{grid-column:1/-1}
  .tf .scale .na{display:none}
  .tf .nps{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tf-badge{display:none}
}
.tf .drop{border:1.5px dashed #B7C0CF;border-radius:12px;padding:20px;display:flex;align-items:center;gap:14px;background:var(--tint);font-size:13.5px;font-weight:500;position:relative}
.tf .drop.over{border-color:var(--accent);background:rgba(11,127,140,.08)}
.tf .drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.tf .drop input[type=file]:focus-visible+*,.tf .drop:focus-within{box-shadow:0 0 0 3px rgba(11,127,140,.3)}
.tf .droppick{color:var(--accent);text-decoration:underline;cursor:pointer}
.tf .filelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tf .filelist li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:400;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-height:36px}
.tf .filelist li span{overflow-wrap:anywhere}
.tf .filelist button{font:600 12.5px var(--ui);border:0;background:transparent;color:#C2272F;cursor:pointer;min-height:32px;padding:0 6px}
.tf .opt{font-weight:400;color:var(--body)}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.choice{min-height:44px;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;color:var(--body);font-size:14.5px;line-height:1.55;text-decoration:none}
.choice b{font-size:21px;color:var(--ink);letter-spacing:-.01em}
.choice .step{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.choice .desc{flex:1}
.choice .time{font-family:var(--mono);font-size:12px;color:var(--meta)}
.choice .go{margin-top:6px;align-self:flex-start;min-height:46px;display:inline-flex;align-items:center}
.choice:hover,.choice:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,127,140,.14)}
@media (max-width:760px){.choices{grid-template-columns:minmax(0,1fr)}}
/* site.css styles bare input for the dark contact band; keep that off every
   checkbox, radio and file input in these forms. */
.tf input[type=checkbox],.tf input[type=radio],.tf input[type=file]{width:auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:inherit}
.tf .scale label input,.tf .drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.tf .droppick{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:9px;background:var(--accent);color:#fff;text-decoration:none;font-weight:650;margin-left:auto}
.tf .drop span{flex:1}
.tf .drop:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,127,140,.3)}
@media (max-width:760px){.tf .drop{flex-wrap:wrap}.tf .droppick{margin-left:0}}

/* MT-8/9: touch devices get 16px form text (iOS zooms below it) and 40px+ targets. */
@media (pointer:coarse),(max-width:940px){
  .tf .fld input[type=text],.tf .fld input[type=email],.tf .fld select,.tf .fld textarea,.tf .mono{font-size:16px}
  .tf .chip{min-height:44px}
  .tf .scale label{min-height:44px}
  .tf .checks label{min-height:40px;align-items:center}
  .tf .checks input{width:22px;height:22px;flex:0 0 22px;margin-top:0}
  .tf .filelist li{min-height:44px}
  .tf .filelist button{min-height:40px;min-width:40px}
}
@media (max-width:760px){
  .tf .scale{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tf .scale .aname{grid-column:1/-1}
}
/* MT-13: validation message sits next to the field it is about */
.tf .fielderr{color:#C2272F;font-size:13px;font-weight:600;margin:0}
.tf .fld.bad input,.tf .fld.bad select,.tf .fld.bad textarea{border-color:#C2272F}
.tf .checks label.bad{outline:2px solid #C2272F;outline-offset:3px;border-radius:6px}
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark}
  .tf .fld input[type=text],.tf .fld input[type=email],.tf .fld select,.tf .fld textarea,.tf .chip,.tf .seg,.tf .tf-badge{background:#0D121B;color:var(--ink);border-color:#313C52}
  .tf .seg button.on{background:#EEF2F8;color:#101521}
  .tf .scale label.on{color:#07090D}
  .tf .droppick{color:#07090D}
  .tf .req,.tf .formnote.err,.tf .fielderr,.tf .filelist button{color:#FF8A90}
  .tf .fld.bad input,.tf .fld.bad select,.tf .fld.bad textarea{border-color:#FF8A90}
  .choice:hover,.choice:focus-visible{box-shadow:0 0 0 3px rgba(76,215,224,.18)}
}