/*
 * The three tool pages: resume, cover letter, reference letter.
 * Loaded only on their page templates (bond_tool_page_assets() in
 * functions.php). The letter tools' own restyle lives with them in the
 * plugin's bond-letters.css; the resume builder is shared with other pages,
 * so its look for this page lives here.
 */

/* ------------------------------------------------------------ shared head */
.lx-hero{background:radial-gradient(1000px 380px at 85% 0,#EEF4FF 0,rgba(238,244,255,0) 70%),radial-gradient(800px 340px at 5% 0,#F3F0FF 0,rgba(243,240,255,0) 70%)}
.lx-hero .wrap.lx-hero-in{padding-top:44px;padding-bottom:6px}
.lx-kick{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#0071E3;background:#fff;border:1px solid #DFE8FB;border-radius:999px;padding:6px 12px;margin-bottom:18px}
.lx-hero h1{font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.04em;margin:0 0 16px;font-weight:700}
.lx-hero h1 em{font-style:normal;background:linear-gradient(90deg,#0071E3,#7C3AED);-webkit-background-clip:text;background-clip:text;color:transparent}
.lx-lead{font-size:19px;line-height:1.5;color:#6E6E73;max-width:720px;margin:0 0 20px}
.lx-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:#6E6E73}
.lx-meta span{display:inline-flex;align-items:center;gap:7px}
.lx-meta svg{width:18px;height:18px;padding:3px;border-radius:50%;color:#16A34A;background:#DCFCE7}
@media (max-width:900px){.lx-lead{font-size:17px}}

/* ----------------------------------------------------- resume builder page */
/* the page head above says it; the builder's own title steps aside */
.gx-main .bond-gen-title,.gx-main .bond-gen-sub{display:none}
.gx-hero .wrap.lx-hero-in{padding-bottom:10px}
/* steps */
.bond-gen .bond-flow{display:flex;gap:6px;padding:6px;margin:6px 0 30px;border-radius:999px;background:#fff;border:1px solid #E8E8ED;box-shadow:0 8px 20px -16px rgba(0,0,0,.3);counter-reset:bondflow}
.bond-gen .bond-flow li{flex:1;min-width:0}
.bond-gen .bond-flow button{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 8px;border-radius:999px;color:#86868B;transition:background .2s,color .2s}
.bond-gen .bond-flow button:not(:disabled):hover{background:#F5F5F7;color:#1D1D1F}
/* the circle sets its own type: no line height, letter spacing, indent or face
   inherited from the page can push the figure off centre */
.bond-gen .bond-flow i{flex:0 0 30px;box-sizing:border-box;width:30px;height:30px;margin:0;padding:0;border:0;border-radius:50%;background:#F0F1F4;display:flex;align-items:center;justify-content:center;font:normal 700 13px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:0;text-indent:0;text-align:center;color:#86868B}
.bond-gen .bond-flow i::before{counter-increment:bondflow;content:counter(bondflow);display:block;font:inherit;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.bond-gen .bond-flow span{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bond-gen .bond-flow span::before{content:none}
.bond-gen .bond-flow .is-on{background:rgba(0,113,227,.08);color:#0071E3}
.bond-gen .bond-flow .is-on i{background:linear-gradient(135deg,#0071E3,#6D3AED);color:#fff;box-shadow:0 6px 14px -6px rgba(91,58,237,.7)}
.bond-gen .bond-flow .is-done{color:#1D1D1F}
.bond-gen .bond-flow .is-done i{background:#DCFCE7;color:transparent;position:relative}
.bond-gen .bond-flow .is-done i::after{content:"";position:absolute;inset:0;background:#16A34A;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.8-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.8-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.bond-gen .bond-step-head h3{font-size:30px;letter-spacing:-.03em;margin:0 0 6px}
.bond-gen .bond-step-head p{font-size:16px;color:#6E6E73;max-width:640px}
/* step 1: experience */
.bond-gen .bond-exp-opts{gap:12px}
.bond-gen .bond-exp-opts:not(.bond-exp-yn) button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:132px;padding:18px 18px 16px;border-radius:20px;background:#fff;border:1px solid #E8E8ED;text-align:left;font-size:17px;font-weight:700;letter-spacing:-.01em;color:#1D1D1F;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.bond-gen .bond-exp-opts:not(.bond-exp-yn) button::before{content:"";width:32px;height:28px;margin-bottom:auto;background:var(--bars) left bottom/contain no-repeat}
.bond-gen .bond-exp-opts:not(.bond-exp-yn) button::after{content:var(--cap);font-size:13px;font-weight:500;color:#86868B}
.bond-gen .bond-exp-opts:not(.bond-exp-yn) button:hover{transform:translateY(-3px);border-color:rgba(0,113,227,.3);box-shadow:0 18px 34px -22px rgba(0,113,227,.55)}
.bond-gen .bond-exp-opts:not(.bond-exp-yn) button.is-on{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#0071E3,#6D3AED) border-box;border:2px solid transparent;padding:17px 17px 15px;color:#1D1D1F;box-shadow:0 20px 36px -22px rgba(91,58,237,.7)}
.bond-gen [data-exp="none"]{--bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Crect x='2' y='20.0' width='4' height='6.0' rx='2' fill='%230071E3'/%3E%3Crect x='8' y='16.5' width='4' height='9.5' rx='2' fill='%23D9DEE8'/%3E%3Crect x='14' y='13.0' width='4' height='13.0' rx='2' fill='%23D9DEE8'/%3E%3Crect x='20' y='9.5' width='4' height='16.5' rx='2' fill='%23D9DEE8'/%3E%3Crect x='26' y='6.0' width='4' height='20.0' rx='2' fill='%23D9DEE8'/%3E%3C/svg%3E");--cap:"First job or student"}
.bond-gen [data-exp="u3"]{--bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Crect x='2' y='20.0' width='4' height='6.0' rx='2' fill='%230071E3'/%3E%3Crect x='8' y='16.5' width='4' height='9.5' rx='2' fill='%230071E3'/%3E%3Crect x='14' y='13.0' width='4' height='13.0' rx='2' fill='%23D9DEE8'/%3E%3Crect x='20' y='9.5' width='4' height='16.5' rx='2' fill='%23D9DEE8'/%3E%3Crect x='26' y='6.0' width='4' height='20.0' rx='2' fill='%23D9DEE8'/%3E%3C/svg%3E");--cap:"Early career"}
.bond-gen [data-exp="3to5"]{--bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Crect x='2' y='20.0' width='4' height='6.0' rx='2' fill='%230071E3'/%3E%3Crect x='8' y='16.5' width='4' height='9.5' rx='2' fill='%230071E3'/%3E%3Crect x='14' y='13.0' width='4' height='13.0' rx='2' fill='%230071E3'/%3E%3Crect x='20' y='9.5' width='4' height='16.5' rx='2' fill='%23D9DEE8'/%3E%3Crect x='26' y='6.0' width='4' height='20.0' rx='2' fill='%23D9DEE8'/%3E%3C/svg%3E");--cap:"Mid-level"}
.bond-gen [data-exp="5to10"]{--bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Crect x='2' y='20.0' width='4' height='6.0' rx='2' fill='%230071E3'/%3E%3Crect x='8' y='16.5' width='4' height='9.5' rx='2' fill='%230071E3'/%3E%3Crect x='14' y='13.0' width='4' height='13.0' rx='2' fill='%230071E3'/%3E%3Crect x='20' y='9.5' width='4' height='16.5' rx='2' fill='%230071E3'/%3E%3Crect x='26' y='6.0' width='4' height='20.0' rx='2' fill='%23D9DEE8'/%3E%3C/svg%3E");--cap:"Senior"}
.bond-gen [data-exp="10p"]{--bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Crect x='2' y='20.0' width='4' height='6.0' rx='2' fill='%230071E3'/%3E%3Crect x='8' y='16.5' width='4' height='9.5' rx='2' fill='%230071E3'/%3E%3Crect x='14' y='13.0' width='4' height='13.0' rx='2' fill='%230071E3'/%3E%3Crect x='20' y='9.5' width='4' height='16.5' rx='2' fill='%230071E3'/%3E%3Crect x='26' y='6.0' width='4' height='20.0' rx='2' fill='%230071E3'/%3E%3C/svg%3E");--cap:"Lead or executive"}

.bond-gen .bond-exp-q{font-size:17px;font-weight:700;margin:28px 0 10px}
.bond-gen .bond-exp-yn{display:inline-flex;gap:0;padding:4px;border-radius:14px;background:#F5F5F7}
.bond-gen .bond-exp-yn button{min-width:120px;min-height:0;height:44px;padding:0 18px;border:0;border-radius:10px;background:none;font-size:15px;font-weight:600;color:#6E6E73;box-shadow:none}
.bond-gen .bond-exp-yn button:hover{color:#1D1D1F;transform:none}
.bond-gen .bond-exp-yn button.is-on{background:#fff;color:#0071E3;border:0;box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 14px -8px rgba(0,0,0,.25)}
/* buttons */
.bond-gen .bond-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;font-size:15.5px;background:linear-gradient(135deg,#0071E3,#5B3AED);box-shadow:0 14px 28px -14px rgba(91,58,237,.8);transition:transform .2s,box-shadow .2s,opacity .2s}
.bond-gen .bond-btn:hover{background:linear-gradient(135deg,#0071E3,#5B3AED);transform:translateY(-2px)}
.bond-gen .bond-btn[disabled],.bond-gen .bond-flow-nav .bond-btn:disabled{opacity:.35;transform:none;box-shadow:none}
.bond-gen .bond-btn.bond-sec{background:#fff;color:#1D1D1F;border:1px solid #E8E8ED;box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.bond-gen .bond-btn.bond-sec:hover{background:#F5F5F7;color:#0071E3}
/* step 2: gallery */
.bond-gen .bond-filters{gap:8px;padding:6px;border-radius:22px;background:#fff;border:1px solid #E8E8ED;box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.bond-gen .bond-filters button{height:38px;padding:0 15px;border:0;border-radius:999px;font-size:14px;color:#1D1D1F;background:none;transition:background .2s,color .2s}
.bond-gen .bond-filters button:hover{background:#F5F5F7;color:#0071E3}
.bond-gen .bond-filters button.is-on{background:rgba(0,113,227,.08);color:#0071E3}
.bond-gen .bond-filters button[data-filter].is-on{background:#1D1D1F;color:#fff}
.bond-gen .bond-filters-gap{width:1px;height:22px;background:#E8E8ED;margin:0 4px;flex:0 0 1px}
.bond-gen .bond-jump-chip{height:36px;padding:0 8px 0 15px;display:inline-flex;align-items:center;gap:8px;color:#1D1D1F;transition:background .2s,color .2s,border-color .2s}
.bond-gen .bond-jump-chip b{margin:0;font-size:12px;background:#F5F5F7;color:#6E6E73;border-radius:999px;padding:3px 8px}
.bond-gen .bond-jump-chip:hover{color:#0071E3;border-color:rgba(0,113,227,.3)}
.bond-gen .bond-jump-chip.is-on b{background:rgba(255,255,255,.18);color:#fff}
/* rows: a heading with its count, round arrows, and cards four and a
   half to a view, so the half card says the row goes on */
.bond-gen .bond-carousel{margin-bottom:30px}
.bond-gen .bond-carousel-head{align-items:center;margin-bottom:10px}
.bond-gen .bond-carousel-title{display:inline-flex;align-items:center;gap:10px}
.bond-gen .bond-carousel-title b{font-size:22px;letter-spacing:-.02em}
.bond-gen .bond-carousel-title i{margin:0;padding:4px 9px;border-radius:999px;background:#F0F1F4;font-size:12.5px;font-weight:600;line-height:1;color:#6E6E73}
.bond-gen .bond-car-btn{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 8px 20px -14px rgba(0,0,0,.35)}
.bond-gen .bond-car-btn:hover{background:#1D1D1F;color:#fff;border-color:#1D1D1F}
.bond-gen .bond-carousel-row{grid-auto-columns:calc((100% - 72px) / 4.5);gap:18px;padding:8px 2px 20px;scrollbar-width:none}
.bond-gen .bond-carousel-row::-webkit-scrollbar{display:none}
/* cards: the sheet on a soft stage, its name under it; the same card in
   the By profession grid */
.bond-gen .bond-gal-tile,.bond-gen .bond-job-tile{position:relative;gap:0;padding:12px 12px 14px;border:1px solid transparent;border-radius:20px;background:#F5F5F7;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.bond-gen .bond-gal-tile:hover,.bond-gen .bond-job-tile:hover{background:#fff;border-color:#E8E8ED;box-shadow:0 26px 44px -30px rgba(15,23,42,.55);transform:translateY(-4px)}
.bond-gen .bond-gal-tile .bond-pick-frame,.bond-gen .bond-job-tile .bond-pick-frame{border:0;border-radius:8px;outline:0;box-shadow:0 1px 2px rgba(15,23,42,.06),0 14px 28px -18px rgba(15,23,42,.45)}
.bond-gen .bond-gal-tile .bond-pick-name,.bond-gen .bond-job-tile .bond-pick-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:14px;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#1D1D1F}
.bond-gen .bond-gal-tile .bond-pick-cat,.bond-gen .bond-job-tile .bond-pick-cat{margin-top:3px;font-size:12.5px;line-height:1.35;color:#86868B}
/* "Use this template" in the middle of the sheet, growing in on hover */
.bond-gen .bond-pick-cta{top:50%;bottom:auto;translate:-50% -50%;transform:scale(.94);padding:10px 16px;font-size:13px;background:linear-gradient(135deg,#0071E3,#5B3AED);box-shadow:0 12px 24px -12px rgba(91,58,237,.8);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.bond-gen .bond-pick-tile:hover .bond-pick-cta,.bond-gen .bond-pick-tile:focus-visible .bond-pick-cta{transform:none}
/* touch screens have no hover: the button is always there, so it stays small */
@media (hover:none){.bond-gen .bond-pick-cta{padding:7px 12px;font-size:12px;transform:none}}
/* the three best fits: a tinted card and a badge by the name */
.bond-gen .bond-pick-tile.is-best{background:linear-gradient(180deg,#EDF3FF,#F4F1FF)}
.bond-gen .bond-pick-tile.is-best:hover{background:#fff}
.bond-gen .bond-pick-tile.is-best .bond-pick-frame{outline:0}
.bond-gen .bond-pick-tile.is-best .bond-pick-name::after{margin:0;padding:4px 8px;border-radius:999px;background:linear-gradient(135deg,#0071E3,#6D3AED);color:#fff;font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.02em}
/* the chosen one: a gradient ring and a tick */
.bond-gen .bond-pick-tile.is-on{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#0071E3,#6D3AED) border-box;border:2px solid transparent;padding:11px 11px 13px}
.bond-gen .bond-pick-tile.is-on .bond-pick-frame{box-shadow:0 1px 2px rgba(15,23,42,.06),0 14px 28px -18px rgba(15,23,42,.45)}
.bond-gen .bond-pick-tile.is-on::after{content:"";position:absolute;top:20px;right:20px;z-index:3;width:28px;height:28px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.8-5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat,linear-gradient(135deg,#0071E3,#6D3AED);box-shadow:0 6px 14px -6px rgba(91,58,237,.8)}
/* step 3: details */
.gx-main .bond-chosen .bond-link{white-space:nowrap}
.bond-gen .bond-chosen{border-radius:20px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px -18px rgba(0,0,0,.35)}
.bond-gen .bond-form{border-radius:24px;padding:26px 24px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 30px 60px -40px rgba(15,23,42,.3);counter-reset:gxstep}
.bond-gen .bond-form fieldset{counter-increment:gxstep;border-bottom:1px solid #F0F0F3;padding-bottom:18px;margin-bottom:14px}
.bond-gen .bond-form legend{display:flex;align-items:center;gap:10px;float:left;width:100%;margin:4px 0 8px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#0071E3}
.bond-gen .bond-form legend::before{content:counter(gxstep,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#0071E3,#6D3AED);color:#fff;font-size:11.5px;letter-spacing:0;box-shadow:0 6px 14px -6px rgba(91,58,237,.7)}
.bond-gen .bond-form legend + *{clear:both}
.bond-gen .bond-form input,.bond-gen .bond-form select{height:46px;border-radius:12px}
.bond-gen .bond-form textarea{border-radius:12px}
.bond-gen .bond-form input:focus,.bond-gen .bond-form textarea:focus,.bond-gen .bond-form select:focus{border-color:#0071E3;background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.bond-gen .bond-out{padding:18px;border-radius:26px;background:linear-gradient(180deg,#F5F5F7,#EEEEF1)}
.bond-gen .bond-preview{margin-bottom:0}
@media (max-width:900px){
 .bond-gen .bond-flow{border-radius:18px}
 .bond-gen .bond-flow li{flex:0 0 auto}
 .bond-gen .bond-flow li:has(.is-on){flex:1 1 auto}
 .bond-gen .bond-flow button{justify-content:center;padding:0 6px;gap:6px}
 .bond-gen .bond-flow button.is-on{justify-content:flex-start;padding:0 14px 0 8px}
 .bond-gen .bond-flow button:not(.is-on) span{display:none}
 .bond-gen .bond-exp-opts:not(.bond-exp-yn) button{min-height:112px}
 .bond-gen .bond-exp-yn{display:flex}.bond-gen .bond-exp-yn button{flex:1;min-width:0}
 .bond-gen .bond-flow-nav .bond-btn{width:100%;justify-content:center}
}
@media (max-width:1000px){
 .bond-gen .bond-carousel-row{grid-auto-columns:calc((100% - 54px) / 3.5)}
}
@media (max-width:700px){
 .bond-gen .bond-carousel-row{grid-auto-columns:calc((100% - 14px) / 1.6);gap:14px}
 .bond-gen .bond-carousel-title b{font-size:19px}
 .bond-gen .bond-gal-tile,.bond-gen .bond-job-tile{padding:10px 10px 12px;border-radius:18px}
 .bond-gen .bond-pick-tile.is-on{padding:9px 9px 11px}
 .bond-gen .bond-gal-tile .bond-pick-name,.bond-gen .bond-job-tile .bond-pick-name{margin-top:12px;font-size:14.5px}
 .bond-gen .bond-filters{padding:0;background:none;border:0;box-shadow:none;border-radius:0}
 .bond-gen .bond-filters button{height:36px;border:1px solid #E8E8ED;background:#fff}
 .bond-gen .bond-filters-gap{display:none}
}