/* Bismillah - static/ui/tools/score.css — the ATS checker and the resume
   score (ui/tools/ats_score.html, resume_score.html). Builds on kit.css
   (.xt-*) and expertini-ui.css tokens (--x-*). Prefix: .xs- */

/* The shell's guest note says "Try it now — sign up to save"; on these
   metered tools a guest cannot try it, so the page shows its own sign-up
   call to action (.xs-cta) instead. */
.xs-page .xt > .xt-note:not([data-xt-status]):not([data-xt-import]){display:none!important}

.xs{display:flex;flex-direction:column;gap:18px;--xs-ok:#16a34a;--xs-good:#2563eb;--xs-fair:#d97706;--xs-low:#dc2626}
.xs [hidden]{display:none!important}

/* sign-up call to action (guests) */
.xs-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:16px;
  background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(6,182,212,.08));border:1px solid rgba(37,99,235,.2)}
.xs-cta__ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;flex:none;
  background:var(--x-grad);color:#fff}
.xs-cta__ico .x-ico{width:22px;height:22px}
.xs-cta__txt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.xs-cta__txt b{font:600 15px/1.35 var(--x-f-disp);color:var(--x-text)}
.xs-cta__txt span{font-size:13px;line-height:1.55;color:var(--x-text-3)}
.xs-cta__acts{display:flex;gap:8px;flex-wrap:wrap}

/* the form */
.xs-form__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:stretch}
.xs-form__grid>.xt-form{min-width:0}
.xs-drop{position:relative;min-height:150px;padding:22px 16px}
.xs-drop b{overflow-wrap:anywhere;max-width:100%}
.xs-drop span{font-size:12.5px;color:var(--x-subtext)}
.xs-drop:focus-within{border-color:var(--x-primary);box-shadow:var(--x-ring)}
.xs-jd{display:flex;flex-direction:column;height:100%}
.xs-jd textarea{flex:1;min-height:236px}
.xs-privacy{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12.5px;line-height:1.5;color:var(--x-subtext)}
.xs-privacy .x-ico{flex:none;margin-top:1px;color:var(--x-success)}
.xs-form .xt-err:empty{display:none}
.xs-form__acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.xs-form__acts .x-btn{min-width:170px;justify-content:center}
.xs-form__acts .x-btn .x-ico{width:16px;height:16px}
.xs-uses{font-size:12.5px;color:var(--x-subtext)}

/* "what the score is made of" (before the first result) */
.xs-how .xt-sub{margin:6px 0 14px}
.xs-how__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xs-how__list li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--x-border)}
.xs-how__list b{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;
  background:rgba(37,99,235,.08);color:var(--x-primary);font:700 15px var(--x-f-disp)}
.xs-how__list span{font-size:13px;line-height:1.55;color:var(--x-text-3)}
.xs-how__list strong{color:var(--x-text);font-weight:600}

/* result header */
.xs-result{display:flex;flex-direction:column;gap:18px;scroll-margin-top:calc(var(--x-topbar-h,64px) + 12px)}
.xs-head{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.xs-head .xt-ring{transition:background .6s}
.xs-head__txt{flex:1;min-width:220px}
.xs-head__h{margin:6px 0 4px;font:600 19px/1.3 var(--x-f-disp)!important;color:var(--x-text)!important;overflow-wrap:anywhere}
.xs-head__acts{display:flex;flex-direction:column;gap:8px}
.xs-grade{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:12px;font-weight:600;
  background:#f1f5f9;color:var(--x-text-2)}
.xs-grade::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.xs-grade[data-g=strong]{background:#dcfce7;color:#166534}
.xs-grade[data-g=good]{background:#dbeafe;color:#1d4ed8}
.xs-grade[data-g=fair]{background:#fef3c7;color:#92400e}
.xs-grade[data-g=low]{background:#fee2e2;color:#991b1b}
.xs-note{margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;background:#fffbeb;border:1px solid #fde68a;color:#92400e}

/* components */
.xs-comps{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.xs-comp{padding-bottom:16px;border-bottom:1px solid var(--x-border)}
.xs-comp:last-child{padding-bottom:0;border-bottom:0}
.xs-comp .xt-bar__top b{font:600 14px/1.35 var(--x-f-disp);color:var(--x-text)}
.xs-comp__pts{font-weight:600;color:var(--x-text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.xs-comp.is-na .xs-comp__pts{color:var(--x-subtext);font-weight:500}
.xs-find,.xs-fix{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.xs-find li,.xs-fix li{position:relative;padding-left:20px;font-size:13px;line-height:1.55;color:var(--x-text-3)}
.xs-find li::before{content:'';position:absolute;left:5px;top:.6em;width:5px;height:5px;border-radius:50%;background:#94a3b8}
.xs-fix li{color:#1e3a8a}
.xs-fix li::before{content:'\2192';position:absolute;left:1px;top:0;color:var(--x-primary);font-weight:700}

/* top fixes */
.xs-fixes{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:xs}
.xs-fixes li{position:relative;padding-left:36px;font-size:13.5px;line-height:1.55;color:var(--x-text-2);counter-increment:xs;min-height:26px}
.xs-fixes li::before{content:counter(xs);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;background:var(--x-grad);color:#fff;font:700 12.5px/1 var(--x-f-disp)}
.xs-fixes .xs-none{padding-left:0}
.xs-fixes .xs-none::before{display:none}

/* parse report */
.xs-parse{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;margin:16px 0 0;font-size:13px}
.xs-parse dt{color:var(--x-subtext);white-space:nowrap}
.xs-parse dd{margin:0;color:var(--x-text);font-weight:500;overflow-wrap:anywhere}
.xs-parse dd.is-bad{color:#b91c1c}
.xs-parse dd.is-ok{color:#15803d}
.xs-yes{color:#15803d}.xs-no{color:#b91c1c}

/* keywords */
.xs-kwp .xt-panel__head{margin-bottom:6px;flex-wrap:wrap}
.xs-kwp__note{margin:0 0 14px}
.xs-req-key,.xs-req{display:inline-block;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;background:rgba(153,27,27,.12);color:#991b1b;vertical-align:1px}
.xs-kwg{margin-top:14px}
.xs-kwg:first-child{margin-top:0}
.xs-kwg h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 13.5px/1.3 var(--x-f-disp)!important;color:var(--x-text)!important}
.xs-kwg h3 small{font:600 11.5px var(--x-f-body);padding:1px 8px;border-radius:99px;background:#f1f5f9;color:var(--x-subtext)}
.xs-kwg .xt-chip{font-size:12.5px;padding:5px 11px}
.xs-kwg .xt-chip i{font-style:normal;opacity:.7;font-size:11px}
.xs-kwg .xt-chip .xs-req{margin-left:2px}

/* resume score: the readiness teaser + missing-word chips */
.xs-ready{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:16px}
.xs-ready__txt{flex:1;min-width:200px}
.xs-ready__txt>b{display:block;font:600 14px/1.4 var(--x-f-disp);color:var(--x-text)}
.xs-ready__txt p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--x-text-3)}
.xs-ready ul{margin:8px 0 0;padding-left:18px}
.xs-ready li{font-size:13px;line-height:1.55;color:var(--x-text-3)}
.xs-explain{margin:0;font-size:13px;line-height:1.6;color:var(--x-text-3)}

/* history */
.xs-hist .xt-item{align-items:center}
.xs-hist .xt-ring--sm{width:52px;height:52px}
.xs-hist .xt-ring--sm::before{inset:5px}
.xs-hist .xt-ring--sm b{font-size:15px}
.xs-hist .xt-item__p{margin-top:4px;white-space:normal}
.xs-hist .xt-item__acts{align-items:center}
.xs-hist .x-btn--mini{white-space:nowrap}

/* guide table */
.xs-wtable{margin:8px 0 12px}
.xs-wtable td:nth-child(2){font-weight:700;color:var(--x-primary);white-space:nowrap;text-align:center}
.xs-wtable td{font-size:13px;line-height:1.55}
.xt-guide .xs-wtable{display:block;overflow-x:auto;border:1px solid var(--x-border);border-radius:12px;background:#fff}

@media (max-width:900px){
  .xs-form__grid{grid-template-columns:1fr}
  .xs-jd textarea{min-height:180px}
  .xs-how__list{grid-template-columns:1fr}
}
@media (max-width:600px){
  .xs-head{gap:16px}
  .xs-head .xt-ring{width:112px;height:112px}
  .xs-head__acts{flex-direction:row;flex-wrap:wrap;width:100%}
  .xs-head__acts .x-btn{flex:1}
  .xs-form__acts .x-btn{width:100%}
  .xs-cta__acts{width:100%}
  .xs-cta__acts .x-btn{flex:1;justify-content:center}
  .xs-parse{grid-template-columns:1fr;gap:2px 0}
  .xs-parse dd{margin-bottom:8px}
  .xs-hist .xt-item{flex-wrap:nowrap}
  .xs-hist .xt-item__acts{flex-direction:column}
}
@media print{.xs-form,.xs-cta,.xs-how,.xs-hist,.xs-head__acts,[data-xs-copy]{display:none!important}}