/* Bismillah - static/ui/tools/letters.css — shared styles for the cover
   letter writer, the application analyzer and the Candidate Match Score
   (ui/tools/cover_letter.html, application_analyzer.html, cms.html).
   Builds on kit.css (.xt-*) and expertini-ui.css tokens (--x-*). Prefix .xl- */

.xl .xt-panel__head{flex-wrap:wrap}
.xl-h2{display:flex;align-items:center;gap:10px;margin:0;font:600 16px/1.3 var(--x-f-disp)!important;color:var(--x-text)!important}
.xl-h2 .x-itile{width:34px;height:34px;border-radius:10px}
.xl-h2 .x-ico{width:17px;height:17px}
.xl-sec{margin:4px 0 2px;padding-top:16px;border-top:1px solid var(--x-border)}
.xl-fine{margin:0;font-size:12px;line-height:1.5;color:var(--x-subtext)}
.xl-fine .x-ico{width:13px;height:13px;margin:-2px 4px 0 0;color:var(--x-subtext)}
.xl-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.xl-acts--end{justify-content:flex-end}
.xl-grow{flex:1 1 auto}
.xl-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.xt-guide ol{margin:0 0 10px;padding-left:22px}
.xt-guide ol li{list-style:decimal;margin-bottom:5px}
.xt-guide ul.xl-ul{margin:0 0 10px;padding-left:20px}
.xt-guide ul.xl-ul li{list-style:disc;margin-bottom:4px}

/* labelled segmented control that wraps nicely on phones */
.xl-opt{display:flex;flex-direction:column;gap:6px}
.xl-opt>span{font-size:12.5px;font-weight:500;color:var(--x-subtext)}
.xl-opt .xt-seg{display:flex;width:100%}
.xl-opt .xt-seg button{flex:1 1 auto;padding:7px 10px}
.x-field .xl-check,.xl-check{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:12.5px;color:var(--x-text-3);cursor:pointer;line-height:1.45}
.xl-check input{margin:2px 0 0;width:15px;height:15px;accent-color:var(--x-primary);flex:none}

/* status pills */
.xl-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;
  background:#f1f5f9;color:var(--x-text-3)}
.xl-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.xl-pill--ok{background:#ecfdf5;color:#047857}
.xl-pill--warn{background:#fffbeb;color:#b45309}
.xl-pill--ai{background:rgba(124,58,237,.1);color:#6d28d9}
.xl-pill--plain::before{display:none}

/* empty state inside a panel */
.xl-blank{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 18px 30px;border:1.5px dashed #dbe3ee;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(248,250,252,.6))}
.xl-blank .x-itile{width:52px;height:52px;border-radius:16px;margin-bottom:6px}
.xl-blank .x-itile .x-ico{width:24px;height:24px}
.xl-blank h3{margin:0;font:600 16px/1.3 var(--x-f-disp)!important;color:var(--x-text)!important}
.xl-blank>p{margin:0;max-width:420px;font-size:13.5px;line-height:1.6;color:var(--x-subtext)}
.xl-steps{display:flex;flex-direction:column;gap:10px;margin:16px 0 0;padding:0;list-style:none;text-align:left;max-width:440px;width:100%;counter-reset:xl}
.xl-steps li{position:relative;padding:10px 12px 10px 46px;border-radius:12px;background:#fff;border:1px solid var(--x-border);font-size:13px;line-height:1.5;color:var(--x-text-3);counter-increment:xl}
.xl-steps li::before{content:counter(xl);position:absolute;left:12px;top:9px;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font:700 12px var(--x-f-disp);color:#fff;background:linear-gradient(135deg,var(--x-primary),var(--x-accent))}
.xl-steps b{color:var(--x-text);font-weight:600}

/* ── cover letter editor ── */
.xl-editor .x-field label{display:flex;justify-content:space-between;gap:8px}
.xl textarea.xl-paper{width:100%;min-height:520px;padding:26px 28px!important;border-radius:14px!important;border:1px solid #dfe6ef!important;background:#fff!important;
  font:400 15px/1.75 var(--x-f-body)!important;color:#1e293b!important;resize:vertical;box-shadow:0 1px 0 rgba(15,23,42,.03),0 10px 30px -18px rgba(15,23,42,.25)}
.xl-paper:focus{border-color:var(--x-primary)!important;box-shadow:var(--x-ring)!important}
.xl-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--x-subtext)}
.xl-meta b{color:var(--x-text);font-weight:600}
.xl-ph{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:13px}
.xl-ph span{flex:1;min-width:180px}
.xl-ph[hidden]{display:none!important}
.xl-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:4px}
.xl-toolbar .xl-grow{min-width:8px}
.xl-skel{padding:26px 28px;border-radius:14px;border:1px solid var(--x-border);background:#fff;min-height:420px}
.xl-skel p{margin:0 0 18px;font-size:13px;color:#6d28d9;font-weight:600;display:flex;align-items:center;gap:8px}
.xl-skel .xt-skel{gap:12px}
.xl-skel .xt-skel i{height:11px}

/* saved list rows */
.xl-row{cursor:pointer}
.xl-row .xt-item__t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xl-chiprow{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.xl-score{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-direction:column;
  font:700 15px/1 var(--x-f-disp);color:#fff;background:#94a3b8}
.xl-score small{font:600 9px/1.2 var(--x-f-body);opacity:.85;margin-top:2px;letter-spacing:.04em;text-transform:uppercase}
.xl-c1{background:linear-gradient(135deg,#059669,#16a34a)}
.xl-c2{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.xl-c3{background:linear-gradient(135deg,#d97706,#f59e0b)}
.xl-c4{background:linear-gradient(135deg,#ea580c,#f97316)}
.xl-c5{background:linear-gradient(135deg,#dc2626,#ef4444)}
.xl-list-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.xl-list-head .x-fld{max-width:320px;flex:1 1 220px}

/* ── analyzer / results ── */
.xl-res{display:flex;flex-direction:column;gap:16px}
.xl-box{padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--x-border)}
.xl-box--ai{background:linear-gradient(135deg,rgba(124,58,237,.045),rgba(37,99,235,.045));border-color:rgba(124,58,237,.18)}
.xl-box__h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.xl-box__h h3{margin:0;font:600 15px/1.3 var(--x-f-disp)!important;color:var(--x-text)!important}
.xl-big{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:13.5px;color:var(--x-text-3)}
.xl-big b{font:700 26px/1 var(--x-f-disp);color:var(--x-text)}
.xl-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.xl-sub{margin:0 0 8px;font:600 12px/1.3 var(--x-f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--x-subtext)}
.xl-p{margin:0;font-size:14px;line-height:1.65;color:var(--x-text-2);white-space:pre-line;overflow-wrap:anywhere}
.xl-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--x-subtext)}
.xl-pri{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;counter-reset:xp}
.xl-pri li{position:relative;padding:12px 14px 12px 48px;border-radius:12px;background:#fff;border:1px solid var(--x-border);counter-increment:xp}
.xl-pri li::before{content:counter(xp);position:absolute;left:14px;top:12px;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font:700 11.5px var(--x-f-disp);color:#b45309;background:#fef3c7}
.xl-pri b{display:block;margin-bottom:3px;font-size:14px;font-weight:600;color:var(--x-text)}
.xl-pri span{font-size:13.5px;line-height:1.6;color:var(--x-text-3)}
.xl-qs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.xl-qs li{padding:10px 12px 10px 36px;position:relative;border-radius:10px;background:#f8fafc;font-size:13.5px;line-height:1.55;color:var(--x-text-2)}
.xl-qs li::before{content:'?';position:absolute;left:12px;top:10px;width:16px;height:16px;border-radius:50%;background:var(--x-primary);color:#fff;font:700 10.5px/16px var(--x-f-disp);text-align:center}
.xl-qs--rec li{white-space:pre-line}
.xl-qs--rec li::before{content:'\2192';background:#e0e7ff;color:#3730a3}
.xl-head{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.xl-head__txt{flex:1;min-width:200px}
.xl-head__txt h3{margin:0 0 4px;font:600 18px/1.3 var(--x-f-disp)!important;color:var(--x-text)!important;overflow-wrap:anywhere}
.xl-head__txt .xl-p{font-size:13.5px}
.xl-ring{width:118px;height:118px}
.xl-ring b{font-size:28px}
.xl-ring small{white-space:nowrap}

/* ── CMS ── */
.xl-file,.x-field .xl-file{position:relative;min-height:132px;display:flex;margin:0;font-size:13.5px;font-weight:400;color:var(--x-text-3);line-height:1.6}
.xl-file small{font-size:12px}
.xl-file [data-cms-pick] .x-ico{width:26px;height:26px;color:var(--x-primary)}
.xl-file__name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px;color:#166534}
.xl-file__name b{color:#14532d;overflow-wrap:anywhere}
.xl-formula{display:block;margin:0;padding:12px 16px;border-radius:12px;background:#0f172a;color:#e2e8f0;
  font:500 13px/1.5 ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;overflow-wrap:anywhere}
.xl-formula b{color:#67e8f9;font-weight:600}
.xl-formula em{font-style:normal;color:#a5b4fc}
.xl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.xl-stat{padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid var(--x-border);min-width:0}
.xl-stat b{display:block;font:700 18px/1.2 var(--x-f-disp);color:var(--x-text);overflow-wrap:anywhere}
.xl-stat span{font-size:11.5px;color:var(--x-subtext);font-weight:500}
.xl-tier{display:inline-flex;align-items:center;padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:700;letter-spacing:.01em}
.xl-t1{background:#dcfce7;color:#166534}.xl-t2{background:#dbeafe;color:#1d4ed8}.xl-t3{background:#fef3c7;color:#b45309}
.xl-t4{background:#ffedd5;color:#c2410c}.xl-t5{background:#fee2e2;color:#b91c1c}
.xl-block{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:13.5px;line-height:1.55}
.xl-block .x-ico{width:18px;height:18px;flex:none;margin-top:1px}
.xl-block b{display:block;color:#7f1d1d;font-weight:600;margin-bottom:2px}
.xl-dims td{font-size:13px}
.xl-dims th small{display:block;font-size:10.5px;font-weight:500;letter-spacing:.04em;color:#94a3b8}
.xl-dims td,.xl-dims th{padding-left:12px;padding-right:12px}
.xl-dims td:last-child{white-space:nowrap}
.xl-dims td:first-child{min-width:200px}
.xl-dims .xl-dlabel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:600;color:var(--x-text);font-size:13.5px}
.xl-dims .xl-why{margin:4px 0 0;color:var(--x-text-3);line-height:1.5;font-size:12.5px;overflow-wrap:anywhere}
.xl-mbar{display:flex;align-items:center;gap:8px;min-width:96px}
.xl-mbar b{font:600 13px var(--x-f-disp);color:var(--x-text);min-width:24px;text-align:right}
.xl-mbar .xt-bar{flex:1;height:6px}
.xl-mbar--imp .xt-bar i{background:linear-gradient(90deg,#a78bfa,#7c3aed)}
.xl-dims tr.is-block td{background:#fff7f7}
.xl-priv{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 16px;border-radius:12px;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;font-size:13px}
.xl-priv .x-ico{width:17px;height:17px}
.xl-priv span{flex:1;min-width:200px}
.xl-cite{padding:14px 16px;border-radius:12px;background:#f8fafc;border:1px solid var(--x-border);font-size:12.5px;line-height:1.6;color:var(--x-text-3)}
.xl-cite b{color:var(--x-text);font-weight:600}
.xl-loadsteps{display:flex;flex-direction:column;gap:8px;margin:18px auto 0;padding:0;list-style:none;max-width:340px;width:100%;text-align:left}
.xl-loadsteps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--x-subtext)}
.xl-loadsteps li::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid #cbd5e1;flex:none}
.xl-loadsteps li.is-on{color:var(--x-text);font-weight:600}
.xl-loadsteps li.is-on::before{border-color:rgba(37,99,235,.25);border-top-color:var(--x-primary);animation:xt-spin .8s linear infinite}
.xl-loadsteps li.is-done{color:#047857}
.xl-loadsteps li.is-done::before{border-color:#10b981;background:#10b981;box-shadow:inset 0 0 0 2px #fff}
.xl-defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;width:100%;max-width:480px;text-align:left}
.xl-defs div{padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--x-border);font-size:12.5px;line-height:1.5;color:var(--x-text-3)}
.xl-defs b{display:block;color:var(--x-text);font-weight:600;font-size:13px}

@media (max-width:1100px){.xl textarea.xl-paper{min-height:420px}}
@media (max-width:720px){
  .xl textarea.xl-paper{padding:18px 16px!important;font-size:14.5px!important;min-height:380px}
  .xl-cols,.xl-defs{grid-template-columns:1fr}
  .xl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xl-box{padding:16px 14px}
  .xl-list-head .x-fld{max-width:none}
  .xl-toolbar .x-btn{flex:1 1 auto}
  .xl-dims thead{display:none}
  .xl-dims,.xl-dims tbody,.xl-dims tr,.xl-dims td{display:block;width:100%}
  .xl-dims tr{padding:10px 12px;border-bottom:1px solid var(--x-border)}
  .xl-dims tr:last-child{border-bottom:0}
  .xl-dims td{padding:4px 0;border:0}
  .xl-dims td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--x-subtext);margin-bottom:2px}
  .xl-head{gap:14px}
  .xl-ring{width:96px;height:96px}
  .xl-ring b{font-size:24px}
}
@media print{.xl-toolbar,.xl-ph{display:none!important}}