/* Shared styles for the two interactive engine pages, tool.html and
   for-employees.html: the intake form and the results panel. Ported in
   spirit from CVelo for Employers' web/styles.css (.task-row, .toolcard,
   .segmented, .badge, .stat, .paywall, .consult-card), restyled in AUUSI's
   own teal/violet/coral/gold palette rather than CVelo's indigo. */

.eng-layout{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:100px}
@media (min-width:960px){.eng-layout{grid-template-columns:1fr 1.15fr;align-items:start}}

/* min-width:0 on the grid item: without it, a grid track shrinks only to the
   CONTENT's min-content width (a <select> with long option text, in this
   case, a family name), not the track width, and the form overflowed the
   viewport horizontally on a real phone-width test until this was added. */
.panel{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--panel-line);border-radius:22px;padding:28px;min-width:0}
@media (min-width:640px){.panel{padding:34px}}

.field{margin-top:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--text-soft);margin-bottom:7px}
.field .hint{font-weight:400;color:var(--text-mute)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field select,.field textarea{
  width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--panel-line);background:rgba(255,255,255,.03);color:var(--text);font:inherit;font-size:15px
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none}
.field textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.segmented{display:inline-flex;border:1.5px solid var(--panel-line);border-radius:12px;overflow:hidden}
.segmented button{border:0;background:rgba(255,255,255,.03);padding:10px 15px;font:inherit;font-size:14px;cursor:pointer;color:var(--text-soft);border-right:1px solid var(--panel-line)}
.segmented button:last-child{border-right:0}
.segmented button.on{background:linear-gradient(120deg,var(--teal-deep),var(--teal));color:#04211D;font-weight:700}

.check-row{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14.5px;color:var(--text-soft)}
.check-row input{width:17px;height:17px;accent-color:var(--teal)}

.task-list{margin-top:10px;max-height:340px;overflow-y:auto;border:1.5px solid var(--panel-line);border-radius:14px}
.task-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--panel-line)}
.task-row:last-child{border-bottom:0}
.task-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--teal);flex-shrink:0}
.task-row .tname{flex:1;font-size:14.5px}
.task-row .verdict{font-size:11px;color:var(--teal);background:rgba(45,212,191,.1);border-radius:999px;padding:3px 10px;white-space:nowrap}
.task-row .star{border:0;background:none;cursor:pointer;font-size:18px;color:var(--text-mute);line-height:1;padding:0 2px}
.task-row .star.on{color:var(--gold)}
.task-row.dim{opacity:.48}

.badge{display:inline-block;font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px}
.badge.self{background:rgba(45,212,191,.14);color:var(--teal)}
.badge.consult{background:rgba(255,194,75,.14);color:var(--gold)}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}

.block{margin-top:26px;padding-top:26px;border-top:1px solid var(--panel-line)}
.block:first-of-type{margin-top:18px;padding-top:0;border-top:0}
.block h3{font-size:18px;margin-bottom:12px}

.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.toolcard{border:1px solid var(--panel-line);border-radius:14px;padding:15px 17px;background:rgba(255,255,255,.02)}
.toolcard .skill{font-size:12px;color:var(--text-mute)}
.toolcard .lead{font-weight:700;font-size:15.5px;margin-top:3px}
.toolcard .alts{font-size:12.5px;color:var(--text-soft);margin-top:4px}
.toolcard .train{font-size:12px;color:var(--teal);margin-top:8px}
.toolcard.sensitive{border-color:rgba(255,194,75,.4);background:rgba(255,194,75,.06)}
.toolcard.sensitive .flag{font-size:12px;color:var(--gold);margin-top:6px}
.toolcard.me-ai{border-left:3px solid var(--teal);background:rgba(45,212,191,.06)}
.toolcard.me-ai .skill{color:var(--teal)}
.toolcard.me-yours{border-left:3px solid var(--violet);background:rgba(139,124,248,.06)}
.toolcard.me-yours .skill{color:var(--violet)}

.statband{display:flex;gap:30px;flex-wrap:wrap}
.statbig{font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:750;letter-spacing:-.3px}
.statbig .unit{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--text-soft);margin-left:4px}
.statsub{font-size:12.5px;color:var(--text-mute)}

table.eng-table{width:100%;font-size:14px;border-collapse:collapse}
table.eng-table th{text-align:left;font-size:11.5px;color:var(--text-mute);font-weight:600;padding-bottom:8px}
table.eng-table td{padding:8px 4px;border-top:1px solid var(--panel-line)}
table.eng-table td.num,table.eng-table th.num{text-align:right}
table.eng-table input[type=number]{width:80px;padding:6px 8px;border-radius:8px;border:1.5px solid var(--panel-line);background:rgba(255,255,255,.03);color:var(--text);font:inherit;font-size:13.5px;text-align:right}
table.eng-table input:disabled{opacity:.4}
.warn-tag{color:var(--gold);font-size:11.5px}
.free-tag{color:var(--violet);font-size:11.5px}

details.working{margin-top:14px;border:1px solid var(--panel-line);border-radius:12px}
details.working summary{cursor:pointer;padding:11px 16px;font-size:13.5px;color:var(--text-soft)}
details.working table{margin:0 16px 14px}

.paywall,.consult-panel{margin-top:22px;border-radius:18px;padding:28px;text-align:center}
.paywall{border:1.5px solid rgba(45,212,191,.35);background:linear-gradient(180deg,rgba(45,212,191,.08),rgba(255,255,255,.02))}
.consult-panel{border:1.5px solid rgba(255,194,75,.4);background:linear-gradient(180deg,rgba(255,194,75,.08),rgba(255,255,255,.02))}
.paywall h3,.consult-panel h3{margin-bottom:8px}
.paywall p,.consult-panel p{color:var(--text-soft);max-width:520px;margin:0 auto 16px}

.note-box{border:1px solid var(--panel-line);border-radius:12px;padding:16px 18px;font-size:14.5px;color:var(--text-soft);background:rgba(255,255,255,.02)}

.cft-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cft-row input{flex:1;min-width:200px}
.err-text{color:var(--coral);font-size:13px;margin-top:8px}
.muted-text{color:var(--text-mute);font-size:13px;margin-top:8px}