/* intake.css — client intake flow (/intake/). Loaded ON TOP of site.css, which
   owns the palette, the header, the footer and the form controls. Only what is
   specific to the three-step flow lives here. */

/* ------------------------------------------------------------ the steps */
.steps{counter-reset:step}
.step{
  border:var(--rule); border-radius:10px; background:var(--panel);
  padding:clamp(22px,3vw,38px); margin-top:26px; position:relative;
}
.step > h3{display:flex; align-items:baseline; gap:14px; margin-bottom:6px}
.step > h3::before{
  counter-increment:step; content:counter(step);
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:0;
  color:var(--paper); background:var(--ink);
  min-width:26px; height:26px; border-radius:13px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; transform:translateY(-3px);
}
.step .why{font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--soft); margin:12px 0 0; max-width:66ch}
.step .why + .why{margin-top:10px}
.step .sub{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pass); margin:26px 0 10px}

.dlrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; align-items:center}
.dlbtn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  color:var(--ink); background:var(--paper); border:1px solid var(--line);
  border-radius:7px; padding:11px 17px;
}
.dlbtn:hover{border-color:var(--pass); color:var(--pass)}
.dlbtn .fmt{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--soft)}
.mailto{font-family:var(--mono); font-size:14px; color:var(--pass); text-decoration:none; border-bottom:1px solid transparent}
.mailto:hover{border-bottom-color:var(--pass)}

/* What this is and what it is not — said once, up front, and repeated in the
   NDA (§2 free of charge / no obligation, §10 the client validates). */
.freebox{
  margin-top:34px; max-width:66ch; border-left:2px solid var(--pass);
  padding:2px 0 2px 20px;
}
.freebox p{font-family:var(--sans); font-size:15px; line-height:1.58; color:var(--soft); margin:0 0 9px}
.freebox p:last-child{margin-bottom:0}
.freebox b{color:var(--ink)}

.reqs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:66ch}
.reqs li{font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--soft);
  padding-left:20px; position:relative}
.reqs li::before{content:"\2192"; position:absolute; left:0; top:0; color:var(--pass); font-family:var(--mono); font-size:13px}
.reqs li b{color:var(--ink)}
.reqs code{font-family:var(--mono); font-size:13.5px; color:var(--ink)}

/* ------------------------------------------------------------ drop zone */
.drop{
  margin-top:22px; border:1.5px dashed var(--line); border-radius:10px;
  background:var(--paper); padding:clamp(26px,4vw,46px) 22px; text-align:center;
  transition:border-color .15s ease, background-color .15s ease;
}
.drop.over{border-color:var(--pass); background:color-mix(in srgb,var(--pass) 7%,var(--paper))}
.drop.busy{border-style:solid}
.drop p{font-family:var(--sans); font-size:15px; color:var(--soft); margin:0 0 4px}
.drop .pick{
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--pass);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:underline;
}
.drop .hint{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--soft); margin-top:12px}
.drop input[type=file]{position:absolute; left:-9999px}

.bar{height:6px; border-radius:4px; background:var(--panel); overflow:hidden; margin:18px auto 0; max-width:340px}
.bar i{display:block; height:100%; width:0; background:var(--pass); border-radius:4px; transition:width .12s linear}

/* -------------------------------------------------------- report panel */
.report{margin-top:24px; border-top:var(--rule); padding-top:22px}
.rhead{display:flex; flex-wrap:wrap; gap:9px 20px; align-items:baseline;
  font-family:var(--sans); font-size:14px; color:var(--soft); margin:0 0 20px}
.rhead b{color:var(--ink); font-variant-numeric:tabular-nums}
.verdict{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px}
.verdict.ready{color:var(--pass); border:1px solid color-mix(in srgb,var(--pass) 45%,transparent)}
.verdict.warn{color:var(--ink); border:1px solid var(--soft)}
.verdict.blocked{color:var(--fail); border:1px solid color-mix(in srgb,var(--fail) 45%,transparent)}

.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 26px; margin:0 0 26px}
.fact{display:flex; flex-direction:column; gap:3px}
.fact .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--soft)}
.fact .v{font-family:var(--mono); font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums}

.rtitle{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); margin:0 0 14px}
.secs{display:flex; flex-direction:column; gap:0; margin:0 0 26px}
.sec{display:grid; grid-template-columns:22px minmax(0,1.1fr) minmax(0,1.3fr) 96px 92px;
  align-items:center; gap:14px; font-family:var(--mono); font-size:12px;
  padding:9px 0; border-bottom:1px solid var(--line);}
.sec:last-child{border-bottom:none}
.sec .fl{font-size:10px}
.sec .nm{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sec .ds{color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sec .fm{color:var(--soft)}
.sec .el{text-align:right; color:var(--soft); font-variant-numeric:tabular-nums}
.sec.ok .fl{color:var(--pass)}
.sec.skip{opacity:.6}
.sec.bad .fl{color:var(--fail)}
@media (max-width:700px){
  .sec{grid-template-columns:22px 1fr 88px; grid-template-areas:"fl nm el" ". ds fm"; gap:3px 12px}
  .sec .fl{grid-area:fl} .sec .nm{grid-area:nm} .sec .ds{grid-area:ds}
  .sec .fm{grid-area:fm; text-align:right} .sec .el{grid-area:el}
}

.issues{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:9px}
.issues li{font-family:var(--sans); font-size:14px; line-height:1.45; padding-left:20px; position:relative; color:var(--soft)}
.issues li::before{position:absolute; left:0; top:1px; font-family:var(--mono); font-size:11px}
.issues li.error{color:var(--fail)}
.issues li.error::before{content:"\2716"}
.issues li.warn::before{content:"\26A0"; color:var(--soft)}
.issues li b{font-family:var(--mono); font-size:12px; color:inherit}

/* --------------------------------------------------------- request form */
.ifields{display:flex; flex-direction:column; gap:16px; max-width:680px; margin-top:22px}
.ifields .frow2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
/* site.css styles .field input and .field textarea but has no <select> anywhere;
   without this the only native-looking control on the page is this one. */
.ifields select{
  font-family:var(--sans); font-size:15.5px; color:var(--ink); background:var(--paper);
  border:var(--rule); border-radius:6px; padding:11px 12px; width:100%; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.ifields select:focus{outline:none; border-color:var(--pass)}
@media (max-width:560px){.ifields .frow2{grid-template-columns:1fr}}
.checkrow{display:flex; gap:11px; align-items:flex-start; font-family:var(--sans); font-size:14.5px;
  line-height:1.5; color:var(--soft); border:0; padding:0; background:none; max-width:none}
.checkrow input{margin-top:4px; accent-color:var(--pass); width:16px; height:16px; flex:0 0 auto}
.summary{
  font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--soft);
  background:var(--paper); border:var(--rule); border-radius:8px; padding:14px 16px;
  width:100%; min-height:190px; resize:vertical; white-space:pre;
}
.sendrow{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.copy{
  font-family:var(--sans); font-size:14px; color:var(--soft);
  background:none; border:1px solid var(--line); border-radius:7px; padding:9px 14px; cursor:pointer;
}
.copy:hover{color:var(--ink); border-color:var(--ink)}

/* ---------------------------------------------------------- what's next */
.after{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:30px}
.after h4{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pass); margin:0 0 8px; font-weight:600}
.after p{font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--soft); margin:0}

/* boton flotante azul para volver a la home (mismo que el deck de Shanghai) */
.home-fab{position:fixed; left:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:8px;
  background:var(--pass); color:#06122b; font-family:var(--sans); font-size:14px; font-weight:700;
  text-decoration:none; padding:11px 17px; border-radius:26px; box-shadow:0 8px 26px rgba(0,0,0,.55);
  transition:transform .15s ease}
.home-fab:hover{transform:translateY(-2px)}