/* ============================================================
   EEK site · visual inspection project requirement assessment module  sany-inquiry.css
   —— Scope: .sy-shell .inq  (affects this module only, never other site styles)
   Class names all use the .inq- prefix
   Design language matches sany-inner.css: primary #ed6a18 / background #f8f8f8 / border #e5e5e5
   ============================================================ */

.sy-shell .inq{
  --inq-red:#ed6a18;
  --inq-red-d:#d25a10;
  --inq-dark:#1a1a1a;
  --inq-text:#333;
  --inq-text-2:#666;
  --inq-text-3:#999;
  --inq-bg:#f8f8f8;
  --inq-border:#e5e5e5;
  margin:0 0 46px;
  color:var(--inq-text);
  font-size:14px;
  line-height:1.75;
}
.sy-shell .inq *,
.sy-shell .inq *::before,
.sy-shell .inq *::after{box-sizing:border-box;}

/* ---------------- Title area ---------------- */
.sy-shell .inq-head{margin-bottom:22px;}
.sy-shell .inq-kicker{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--inq-red);font-weight:700;margin-bottom:8px;
}
.sy-shell .inq-title{
  font-size:24px;line-height:1.35;color:var(--inq-dark);font-weight:700;
  margin:0 0 10px;padding:0;border:0;
}
.sy-shell .inq-sub{margin:0 0 14px;color:var(--inq-text-2);font-size:14px;}
.sy-shell .inq-note{
  margin:0;padding:12px 16px;background:var(--inq-bg);border-left:3px solid var(--inq-red);
  font-size:13px;color:var(--inq-text-2);border-radius:0 4px 4px 0;
}
.sy-shell .inq-note b{color:var(--inq-dark);}

/* ---------------- Top-level entry (quick / full) ---------------- */
.sy-shell .inq-gate{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 0;}
/* ⚠ display:grid overrides the display:none of [hidden], so this rule has to be added explicitly */
.sy-shell .inq-gate[hidden]{display:none;}
.sy-shell .inq-gate-card{
  display:block;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--inq-border);border-radius:8px;
  padding:22px 22px 20px;transition:.22s;position:relative;
}
.sy-shell .inq-gate-card:hover{border-color:var(--inq-red);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(237,106,24,.12);}
.sy-shell .inq-gate-card.is-primary{background:var(--inq-dark);border-color:var(--inq-dark);color:#fff;}
.sy-shell .inq-gate-card.is-primary:hover{border-color:var(--inq-red);}
.sy-shell .inq-gate-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;background:rgba(237,106,24,.12);
  color:var(--inq-red);font-size:17px;margin-bottom:12px;
}
.sy-shell .inq-gate-card.is-primary .inq-gate-ico{background:rgba(255,255,255,.14);color:#fff;}
.sy-shell .inq-gate-h{display:block;font-size:17px;font-weight:700;color:var(--inq-dark);margin-bottom:6px;}
.sy-shell .inq-gate-card.is-primary .inq-gate-h{color:#fff;}
.sy-shell .inq-gate-p{display:block;font-size:13px;color:var(--inq-text-2);margin:0 0 10px;}
.sy-shell .inq-gate-card.is-primary .inq-gate-p{color:rgba(255,255,255,.72);}
.sy-shell .inq-gate-meta{
  display:block;font-size:12px;color:var(--inq-text-3);
  padding-top:10px;border-top:1px solid var(--inq-border);
}
.sy-shell .inq-gate-card.is-primary .inq-gate-meta{color:rgba(255,255,255,.6);
  border-top-color:rgba(255,255,255,.16);}

/* ---------------- Shared panel ---------------- */
.sy-shell .inq-panel{margin-top:22px;}
.sy-shell .inq-panel[hidden]{display:none;}
.sy-shell .inq-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--inq-bg);border:1px solid var(--inq-border);border-radius:8px 8px 0 0;
  padding:12px 18px;font-size:13px;color:var(--inq-text-2);
}
.sy-shell .inq-bar-mode{font-weight:700;color:var(--inq-dark);}
.sy-shell .inq-bar-back{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:13px;
  color:var(--inq-red);text-decoration:underline;
}
.sy-shell .inq-body{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0;
  border:1px solid var(--inq-border);border-top:0;border-radius:0 0 8px 8px;background:#fff;}
.sy-shell .inq-body.is-flat{grid-template-columns:minmax(0,1fr);}

/* ---------------- Left-hand step nav ---------------- */
.sy-shell .inq-rail{border-right:1px solid var(--inq-border);padding:14px 0;background:#fcfcfc;}
.sy-shell .inq-rail-h{font-size:11px;letter-spacing:.1em;color:var(--inq-text-3);
  text-transform:uppercase;padding:0 18px 10px;}
.sy-shell .inq-rail-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;font:inherit;font-size:13px;color:var(--inq-text-2);
  padding:9px 18px;border-left:3px solid transparent;transition:.18s;
}
.sy-shell .inq-rail-item:hover{background:#f4f4f4;color:var(--inq-dark);}
.sy-shell .inq-rail-item.is-active{background:#fff;border-left-color:var(--inq-red);
  color:var(--inq-dark);font-weight:700;}
.sy-shell .inq-rail-no{
  flex:0 0 20px;height:20px;border-radius:50%;background:#eaeaea;color:#888;
  font-size:11px;line-height:20px;text-align:center;font-weight:700;
}
.sy-shell .inq-rail-item.is-active .inq-rail-no{background:var(--inq-red);color:#fff;}
.sy-shell .inq-rail-item.is-done .inq-rail-no{background:#2e9e5b;color:#fff;}
/* Groups that do not currently apply (e.g. until "Is/Does food industry" is answered, the food / industrial specializations stay unavailable) */
.sy-shell .inq-rail-item.is-off{opacity:.42;cursor:not-allowed;}
.sy-shell .inq-rail-item.is-off:hover{background:none;color:var(--inq-text-2);}
.sy-shell .inq-rail-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------------- Progress bar ---------------- */
.sy-shell .inq-prog{display:flex;align-items:center;gap:14px;padding:14px 22px 0;}
.sy-shell .inq-prog-track{flex:1;height:5px;border-radius:3px;background:#eaeaea;overflow:hidden;}
.sy-shell .inq-prog-fill{height:100%;width:0;background:var(--inq-red);transition:width .3s;}
.sy-shell .inq-prog-txt{font-size:12px;color:var(--inq-text-3);white-space:nowrap;}

/* ---------------- Step content ---------------- */
.sy-shell .inq-steps{padding:18px 22px 0;}
.sy-shell .inq-step[hidden]{display:none;}
.sy-shell .inq-step-head{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--inq-border);}
.sy-shell .inq-step-title{font-size:17px;font-weight:700;color:var(--inq-dark);margin:0 0 4px;}
.sy-shell .inq-step-desc{margin:0;font-size:13px;color:var(--inq-text-3);}

.sy-shell .inq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
.sy-shell .inq-row{min-width:0;}
.sy-shell .inq-row.is-full{grid-column:1 / -1;}
.sy-shell .inq-row[hidden]{display:none;}
.sy-shell .inq-label{display:block;font-size:13px;font-weight:600;color:var(--inq-dark);margin-bottom:6px;}
.sy-shell .inq-req{color:#d9351f;font-style:normal;margin-left:2px;}
.sy-shell .inq-hint{display:block;font-size:12px;color:var(--inq-text-3);margin-top:5px;}
.sy-shell .inq-err{display:none;font-size:12px;color:#d9351f;margin-top:5px;}
.sy-shell .inq-row.has-err .inq-err{display:block;}
.sy-shell .inq-row.has-err .inq-input,
.sy-shell .inq-row.has-err .inq-textarea,
.sy-shell .inq-row.has-err .inq-select,
.sy-shell .inq-row.has-err .inq-opts{border-color:#d9351f;}

/* ---------------- Input controls ---------------- */
.sy-shell .inq-input,
.sy-shell .inq-textarea,
.sy-shell .inq-select{
  width:100%;font:inherit;font-size:14px;color:var(--inq-text);
  background:#fff;border:1px solid #dcdcdc;border-radius:6px;padding:10px 12px;
  transition:.18s;-webkit-appearance:none;appearance:none;
}
.sy-shell .inq-textarea{min-height:88px;resize:vertical;line-height:1.7;}
.sy-shell .inq-select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:34px;
}
.sy-shell .inq-input:focus,
.sy-shell .inq-textarea:focus,
.sy-shell .inq-select:focus{
  outline:0;border-color:var(--inq-red);box-shadow:0 0 0 3px rgba(237,106,24,.12);
}
.sy-shell .inq-input::placeholder,
.sy-shell .inq-textarea::placeholder{color:#b5b5b5;}
.sy-shell .inq-input[type="number"]{-moz-appearance:textfield;}

/* ---------------- Option group (single / multi select) ---------------- */
.sy-shell .inq-opts{
  display:flex;flex-wrap:wrap;gap:8px;border:1px solid transparent;border-radius:6px;
}
.sy-shell .inq-opt{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;color:var(--inq-text);background:var(--inq-bg);
  border:1px solid var(--inq-border);border-radius:6px;padding:8px 13px;transition:.16s;
  user-select:none;
}
.sy-shell .inq-opt:hover{border-color:var(--inq-red);background:#fff5ef;}
.sy-shell .inq-opt input{width:15px;height:15px;margin:0;accent-color:var(--inq-red);cursor:pointer;flex:0 0 auto;}
.sy-shell .inq-opt.is-on{background:#fff5ef;border-color:var(--inq-red);color:var(--inq-red-d);font-weight:600;}

/* ---------------- "Other" expansion ---------------- */
.sy-shell .inq-other{margin-top:8px;}
.sy-shell .inq-other[hidden]{display:none;}

/* ---------------- File upload ---------------- */
.sy-shell .inq-drop{
  border:1px dashed #cfcfcf;border-radius:8px;background:var(--inq-bg);
  padding:18px;text-align:center;font-size:13px;color:var(--inq-text-2);transition:.18s;
}
.sy-shell .inq-drop:hover{border-color:var(--inq-red);background:#fff8f3;}
.sy-shell .inq-drop input[type=file]{display:block;width:100%;font-size:13px;margin-top:10px;}
.sy-shell .inq-drop b{color:var(--inq-dark);}
.sy-shell .inq-flist{margin:10px 0 0;padding:0;list-style:none;font-size:12px;color:var(--inq-text-2);}
.sy-shell .inq-flist li{display:flex;justify-content:space-between;gap:10px;
  padding:5px 0;border-bottom:1px dashed #e8e8e8;}
.sy-shell .inq-flist li:last-child{border-bottom:0;}

/* ---------------- Conditional block ---------------- */
.sy-shell .inq-cond{grid-column:1 / -1;}
.sy-shell .inq-cond[hidden]{display:none;}
.sy-shell .inq-cond-in{
  border:1px solid var(--inq-border);border-left:3px solid var(--inq-red);
  border-radius:0 8px 8px 0;background:#fbfbfb;padding:16px 18px;
}
.sy-shell .inq-cond-h{font-size:13px;font-weight:700;color:var(--inq-dark);margin:0 0 12px;}
.sy-shell .inq-cond .inq-grid{gap:14px 18px;}

/* ---------------- Buttons / bottom nav ---------------- */
.sy-shell .inq-nav{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:18px 22px 22px;margin-top:16px;border-top:1px solid var(--inq-border);
}
.sy-shell .inq-nav-sp{flex:1;}
.sy-shell .inq-btn{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:6px;
  padding:11px 26px;border:1px solid transparent;transition:.18s;
}
.sy-shell .inq-btn.is-primary{background:var(--inq-red);color:#fff;}
.sy-shell .inq-btn.is-primary:hover{background:var(--inq-red-d);}
.sy-shell .inq-btn.is-ghost{background:#fff;border-color:#dcdcdc;color:var(--inq-text-2);}
.sy-shell .inq-btn.is-ghost:hover{border-color:var(--inq-red);color:var(--inq-red);}
.sy-shell .inq-btn[disabled]{opacity:.55;cursor:not-allowed;}
.sy-shell .inq-btn.is-submit{padding:11px 34px;}

/* ---------------- Pre-submit summary confirmation ---------------- */
.sy-shell .inq-sum{border:1px solid var(--inq-border);border-radius:8px;overflow:hidden;}
.sy-shell .inq-sum-grp{border-bottom:1px solid var(--inq-border);}
.sy-shell .inq-sum-grp:last-child{border-bottom:0;}
.sy-shell .inq-sum-gh{
  background:var(--inq-bg);padding:9px 16px;font-size:13px;font-weight:700;color:var(--inq-dark);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.sy-shell .inq-sum-edit{background:none;border:0;font:inherit;font-size:12px;color:var(--inq-red);
  cursor:pointer;text-decoration:underline;padding:0;}
.sy-shell .inq-sum-tb{width:100%;border-collapse:collapse;font-size:13px;}
.sy-shell .inq-sum-tb th,
.sy-shell .inq-sum-tb td{padding:7px 16px;text-align:left;vertical-align:top;
  border-bottom:1px dashed #eee;color:var(--inq-text);font-weight:400;}
.sy-shell .inq-sum-tb tr:last-child th,
.sy-shell .inq-sum-tb tr:last-child td{border-bottom:0;}
.sy-shell .inq-sum-tb th{width:44%;color:var(--inq-text-3);}
.sy-shell .inq-empty{color:#c2c2c2;}

/* ---------------- Hint / success ---------------- */
.sy-shell .inq-alert{
  display:none;margin:0 0 14px;padding:11px 15px;border-radius:6px;font-size:13px;
  background:#fdecea;border:1px solid #f5c6c0;color:#b3271a;
}
.sy-shell .inq-alert.is-on{display:block;}
.sy-shell .inq-alert.is-ok{background:#eaf7ef;border-color:#bfe4cd;color:#226b40;}

.sy-shell .inq-done{padding:34px 24px 30px;text-align:center;}
.sy-shell .inq-done-ico{
  width:60px;height:60px;border-radius:50%;background:#eaf7ef;color:#2e9e5b;
  font-size:28px;line-height:60px;margin:0 auto 16px;
}
.sy-shell .inq-done-h{font-size:20px;font-weight:700;color:var(--inq-dark);margin:0 0 10px;}
.sy-shell .inq-done-p{margin:0 auto 18px;max-width:560px;font-size:14px;color:var(--inq-text-2);}
.sy-shell .inq-done-id{
  display:inline-block;background:var(--inq-bg);border:1px dashed var(--inq-border);
  border-radius:6px;padding:11px 22px;font-size:14px;color:var(--inq-text-2);margin-bottom:20px;
}
.sy-shell .inq-done-id b{color:var(--inq-dark);letter-spacing:.04em;font-size:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.sy-shell .inq-done-steps{
  max-width:620px;margin:0 auto;text-align:left;background:var(--inq-bg);
  border:1px solid var(--inq-border);border-radius:8px;padding:16px 20px;
}
.sy-shell .inq-done-steps h4{margin:0 0 10px;font-size:13px;color:var(--inq-dark);}
.sy-shell .inq-done-steps ol{margin:0;padding-left:20px;font-size:13px;color:var(--inq-text-2);}
.sy-shell .inq-done-steps li{margin-bottom:5px;}
.sy-shell .inq-done-tip{margin:18px 0 0;font-size:12px;color:var(--inq-text-3);}

/* ============================================================
   Display mode  .inq.is-display
   —— Keeps the form / wizard look (groups, options and the left-hand contents are all there) but locks the controls
      and drops submission, so it only presents the "assessment dimensions".
   —— ★Switch: the is-display class on the module root <section class="inq is-display" id="inquiry">.
      Removing that class restores the full submittable form (also change MODE in the generator
      build_inquiry.py from 'display' back to 'form' and rerun it).
   ============================================================ */
.sy-shell .inq.is-display .inq-gate{display:none;}
.sy-shell .inq.is-display .inq-bar-back{display:none;}
.sy-shell .inq.is-display .inq-alert{display:none;}
.sy-shell .inq.is-display .is-submit{display:none !important;}
.sy-shell .inq.is-display .inq-rail-item.is-hide{display:none;}
.sy-shell .inq.is-display .inq-req{display:none;}
.sy-shell .inq.is-display .inq-err{display:none;}

/* Locked controls: keep the readable "form look" rather than greying them out */
.sy-shell .inq.is-display .inq-input:disabled,
.sy-shell .inq.is-display .inq-textarea:disabled,
.sy-shell .inq.is-display .inq-select:disabled{
  background:#fafafa;border-color:var(--inq-border);color:var(--inq-text);
  -webkit-text-fill-color:var(--inq-text);opacity:1;cursor:default;
}
.sy-shell .inq.is-display .inq-select:disabled{color:var(--inq-text-3);}
.sy-shell .inq.is-display .inq-opt{cursor:default;}
.sy-shell .inq.is-display .inq-opt input:disabled{cursor:default;}
.sy-shell .inq.is-display .inq-drop{background:#fafafa;cursor:default;}
.sy-shell .inq.is-display .inq-drop input[type=file]{display:none;}
.sy-shell .inq.is-display .inq-flist{display:none;}

/* Display mode top CTA (this DOM is generated in display mode only) */
.sy-shell .inq-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;}
.sy-shell .inq-cta-btn{
  display:inline-flex;align-items:center;gap:7px;border-radius:6px;
  padding:11px 20px;font-size:14px;font-weight:600;line-height:1;
  border:1px solid var(--inq-border);background:#fff;color:var(--inq-text);
  text-decoration:none;transition:.18s;
}
.sy-shell .inq-cta-btn i{font-size:15px;}
.sy-shell .inq-cta-btn:hover{border-color:var(--inq-red);color:var(--inq-red);}
.sy-shell .inq-cta-btn.is-primary{background:var(--inq-red);border-color:var(--inq-red);color:#fff;}
.sy-shell .inq-cta-btn.is-primary:hover{opacity:.9;color:#fff;}
.sy-shell .inq-cta-tip{font-size:12.5px;color:var(--inq-text-3);}
/* Display mode bottom CTA: the contact entry point follows straight after the visitor has read every group */
.sy-shell .inq-cta.is-bottom{
  margin:26px 0 0;padding:18px 20px;background:var(--inq-bg);
  border:1px solid var(--inq-border);border-radius:8px;
}
.sy-shell .inq-cta-lead{font-size:13.5px;color:var(--inq-text-2);margin-right:2px;}

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){
  .sy-shell .inq-body{grid-template-columns:minmax(0,1fr);}
  .sy-shell .inq-rail{
    border-right:0;border-bottom:1px solid var(--inq-border);
    display:flex;gap:8px;overflow-x:auto;padding:12px 14px;background:#fcfcfc;
  }
  .sy-shell .inq-rail-h{display:none;}
  .sy-shell .inq-rail-item{
    flex:0 0 auto;border-left:0;border:1px solid var(--inq-border);border-radius:20px;
    padding:6px 14px;white-space:nowrap;background:#fff;
  }
  .sy-shell .inq-rail-item.is-active{border-color:var(--inq-red);background:#fff5ef;}
  .sy-shell .inq-rail-t{white-space:nowrap;}
}
@media (max-width:820px){
  .sy-shell .inq-gate{grid-template-columns:1fr;}
  .sy-shell .inq-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .sy-shell .inq-title{font-size:20px;}
  .sy-shell .inq-steps,
  .sy-shell .inq-prog,
  .sy-shell .inq-nav{padding-left:15px;padding-right:15px;}
  .sy-shell .inq-gate-card{padding:18px;}
  .sy-shell .inq-sum-tb th{width:40%;}
  .sy-shell .inq-sum-tb th,
  .sy-shell .inq-sum-tb td{padding:6px 12px;font-size:12.5px;}
  .sy-shell .inq-nav .inq-btn{flex:1 1 auto;text-align:center;padding:11px 16px;}
  .sy-shell .inq-nav-sp{display:none;}
  .sy-shell .inq-bar{padding:10px 15px;font-size:12px;}
  .sy-shell .inq-done{padding:26px 15px 22px;}
  .sy-shell .inq-cta-btn{flex:1 1 100%;justify-content:center;}
  .sy-shell .inq-cta-tip,
  .sy-shell .inq-cta-lead{width:100%;}
}


/* ============================================================
   Inner page "Submit a sample test request" form (reused on 179 inner pages, generated by build_sample_form.py)
   —— Reuses the .inq-* control styles above; only the few pieces unique to this form are added here.
   ============================================================ */
.sy-shell .inq .tpf-note{font-size:12.5px;color:var(--inq-text-3);line-height:1.6;}
.sy-shell .inq .tpf-more{margin:14px 0 0;font-size:13px;color:var(--inq-text-2);}
.sy-shell .inq .tpf-more a{color:var(--inq-red);font-weight:600;text-decoration:none;}
.sy-shell .inq .tpf-more a:hover{text-decoration:underline;}
.sy-shell .inq .tpf-links{display:flex;flex-wrap:wrap;gap:12px;padding:0 22px 22px;}
.sy-shell .inq .inq-nav .tpf-note{margin-left:auto;text-align:right;}
.sy-shell .inq .tpf-done{padding:30px 24px 26px;text-align:center;}
.sy-shell .inq .tpf-done[hidden]{display:none;}
.sy-shell .inq .tpf-done-ico{
  width:56px;height:56px;border-radius:50%;background:#eaf7ef;color:#2e9e5b;
  font-size:26px;line-height:56px;margin:0 auto 14px;
}
.sy-shell .inq .tpf-done-h{font-size:19px;font-weight:700;color:var(--inq-dark);margin:0 0 8px;}
.sy-shell .inq .tpf-done-p{margin:0 auto;max-width:540px;font-size:13.5px;color:var(--inq-text-2);}
.sy-shell .inq .tpf-done-p b{color:var(--inq-dark);}
@media (max-width:600px){
  .sy-shell .inq .tpf-links{padding:0 15px 18px;}
  .sy-shell .inq .inq-nav .tpf-note{margin-left:0;text-align:left;width:100%;}
}