/* Cover Letter Studio (/tools/cover-letter/).
   The tool's own styles, scoped to .cls-app so they never touch the site header, menu or footer,
   and the site's .btn/.card/.panel/.note/.chips styles are reset where the tool uses the same names.
   Page wrapper and tabs come from generator/cover_letter.py; the app itself is assets/js/cover-letter.js. */
.cls-app{--bg:#F8F7FC; --bg2:#FFFFFF; --bg3:#F3F1FA; --line:#E7E4F0;
  --tx:#1B1B22; --tx2:#565863; --tx3:#9A9CA6;

  --ac:#2d0082;      
  --ac2:#6E51D4;     
  --warn:#ff5a01;    
  --bad:#C22C2C;
  --good:#12855B;

  --ac-soft:rgba(75,35,168,.10);
  --ac-ring:rgba(139,111,232,.20);
  --warn-soft:rgba(244,96,15,.10);
  --warn-line:rgba(244,96,15,.32);
  --good-line:rgba(18,133,91,.38);

  --shadow:rgba(21,12,44,.10);
  --sh-card:0 1px 2px rgba(21,12,44,.04), 0 6px 18px -10px rgba(21,12,44,.16);
  --sh-btn:0 1px 2px rgba(21,12,44,.10), 0 6px 16px -8px rgba(75,35,168,.55);

  --r:16px;          
  --r-btn:12px;      
  --r-in:11px;       
  --r-pill:999px;

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --head:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);}
body.dark .cls-app{--bg:#0E0720; --bg2:#150C2C; --bg3:#1F1240; --line:#2E2154;
  --tx:#EDEAF6; --tx2:#A79CC4; --tx3:#7B6F9E;

  --ac:#8B6FE8; --ac2:#B9A6F5; --warn:#FF8A3D; --bad:#FF7B7B; --good:#3DD68C;

  --ac-soft:rgba(139,111,232,.14);
  --ac-ring:rgba(139,111,232,.28);
  --warn-soft:rgba(255,138,61,.12);
  --warn-line:rgba(255,138,61,.38);
  --good-line:rgba(61,214,140,.40);

  --shadow:rgba(0,0,0,.45);
  --sh-card:0 1px 2px rgba(0,0,0,.25), 0 8px 24px -12px rgba(0,0,0,.6);
  --sh-btn:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -8px rgba(139,111,232,.5);}
.cls-app{margin:0;padding:0}
.cls-app{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
.cls-app a{color:var(--ac);text-decoration:none;transition:color .18s var(--ease)}
.cls-app a:hover{color:var(--warn);text-decoration:none}
.cls-app h1,.cls-app h2,.cls-app h3,.cls-app h4{margin:0 0 .4em;line-height:1.22;font-family:var(--head);font-weight:700;letter-spacing:-.018em;color:var(--tx)}
.cls-app h1{font-size:21px}
.cls-app h2{font-size:17.5px}
.cls-app h3{font-size:15px}
.cls-app h4{font-size:11.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.11em;font-weight:700}
.cls-app p{margin:0 0 .8em}
.cls-app hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.cls-app small{color:var(--tx2)}
.cls-app ::selection{background:var(--ac-ring);color:var(--tx)}
.cls-app :focus-visible{outline:3px solid var(--ac2);outline-offset:2px;border-radius:6px}
.cls-app .brand__mark{height:34px;width:auto;display:block}
.cls-app .brand__word{height:19px;width:auto;display:block}
body.dark .cls-app .brand__word.is-light{display:block}
body.dark .cls-app .brand__word.is-dark{display:none}
.cls-app .brand__word.is-light{display:none}
.cls-app main{max-width:1240px;margin:0 auto;padding:20px 16px 34px}
.cls-app .panel{display:none}
.cls-app .panel.on{display:block}
.cls-app .grid{display:grid;gap:16px}
.cls-app .g2{grid-template-columns:1fr 1fr}
.cls-app .g3{grid-template-columns:repeat(3,1fr)}
.cls-app .g-2-1{grid-template-columns:1.35fr .85fr}
@media(max-width:960px){
.cls-app .g2,.cls-app .g3,.cls-app .g-2-1{grid-template-columns:1fr}
}
.cls-app .card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-card)}
.cls-app .card.tight{padding:12px}
.cls-app .card h2,.cls-app .card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cls-app label{display:block;font-family:var(--head);font-size:11.5px;color:var(--tx2);margin:0 0 5px;font-weight:650;letter-spacing:.03em}
.cls-app input[type=text],.cls-app input[type=password],.cls-app input[type=email],.cls-app input[type=url],.cls-app select,.cls-app textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--tx);
  padding:10px 12px;border-radius:var(--r-in);font-family:inherit;font-size:14px;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)}
.cls-app input:focus,.cls-app select:focus,.cls-app textarea:focus{background:var(--bg2);border-color:var(--ac2);box-shadow:0 0 0 4px var(--ac-ring)}
.cls-app input::placeholder,.cls-app textarea::placeholder{color:var(--tx3)}
.cls-app textarea{resize:vertical;min-height:90px;line-height:1.6}
.cls-app .field{margin-bottom:11px}
.cls-app .row{display:flex;gap:10px;flex-wrap:wrap}
.cls-app .row>*{flex:1;min-width:150px}
.cls-app button.btn{background:var(--ac);border:1px solid var(--ac);color:#fff;
  padding:10px 17px;border-radius:var(--r-btn);cursor:pointer;
  font-family:var(--head);font-size:13.5px;font-weight:650;letter-spacing:-.005em;
  box-shadow:var(--sh-btn);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);}
.cls-app button.btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(21,12,44,.10),0 12px 26px -10px rgba(75,35,168,.6);filter:none}
.cls-app button.btn:active{transform:translateY(0) scale(.985)}
.cls-app button.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
body.dark .cls-app button.btn{color:#150C2C}
.cls-app button.btn.accent{background:var(--warn);border-color:var(--warn);color:#fff;
  box-shadow:0 1px 2px rgba(21,12,44,.10),0 6px 16px -8px rgba(244,96,15,.65)}
.cls-app button.btn.accent:hover{background:#D9530A;border-color:#D9530A;
  box-shadow:0 3px 8px rgba(21,12,44,.10),0 12px 26px -10px rgba(244,96,15,.7)}
body.dark .cls-app button.btn.accent{color:#150C2C}
.cls-app button.btn.sec{background:var(--bg3);border-color:var(--line);color:var(--tx);box-shadow:none}
.cls-app button.btn.sec:hover{background:var(--bg2);border-color:var(--ac2);color:var(--ac);box-shadow:var(--sh-card)}
body.dark .cls-app button.btn.sec{color:var(--tx)}
.cls-app button.btn.ghost{background:transparent;border-color:var(--line);color:var(--tx2);box-shadow:none}
.cls-app button.btn.ghost:hover{background:var(--bg3);color:var(--ac);border-color:var(--ac2);box-shadow:none}
body.dark .cls-app button.btn.ghost{color:var(--tx2)}
.cls-app button.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:10px}
.cls-app button.btn.danger{background:transparent;border-color:rgba(194,44,44,.4);color:var(--bad);box-shadow:none}
.cls-app button.btn.danger:hover{background:rgba(194,44,44,.08);border-color:var(--bad);color:var(--bad)}
.cls-app .btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cls-app .hint{font-size:12px;color:var(--tx3);margin-top:4px;line-height:1.55}
.cls-app .chk{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--tx);font-weight:400;margin:0 0 7px}
.cls-app .chk input{width:auto;margin-top:3px;accent-color:var(--ac)}
.cls-app .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.cls-app .chip{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px;font-size:12px;color:var(--tx2);display:inline-flex;align-items:center;gap:6px;font-weight:500}
.cls-app .chip.ok{border-color:var(--good-line);color:var(--good);background:rgba(18,133,91,.07)}
.cls-app .chip.miss{border-color:var(--warn-line);color:var(--warn);background:var(--warn-soft);cursor:pointer;transition:.18s var(--ease)}
.cls-app .chip.miss:hover{background:rgba(244,96,15,.16);transform:translateY(-1px)}
.cls-app .chip .x{cursor:pointer;opacity:.6;font-weight:700}
.cls-app .chip .x:hover{opacity:1}
.cls-app .scores{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -6px 26px -14px var(--shadow)}
body.dark .cls-app .scores{background:rgba(21,12,44,.92)}
.cls-app .scores .inner{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cls-app .gauge{display:flex;align-items:center;gap:11px;background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:8px 13px;min-width:210px}
.cls-app .ring{position:relative;width:46px;height:46px;flex:none}
.cls-app .ring svg{transform:rotate(-90deg)}
.cls-app .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:13px;font-weight:800}
.cls-app .gauge .lab{font-family:var(--head);font-size:11px;color:var(--tx2);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.cls-app .gauge .sub{font-size:12px;color:var(--tx3)}
.cls-app .gauge a{font-size:11.5px}
.cls-app .ring svg{width:100%;height:100%;display:block}
@media(max-width:620px){
.cls-app .scores .inner{gap:7px;padding:8px 12px}
.cls-app .gauge{min-width:0;flex:1 1 calc(50% - 4px);padding:7px 10px;gap:9px;border-radius:12px}
.cls-app .ring{width:36px;height:36px}
.cls-app .ring b{font-size:11px}
.cls-app .gauge .lab{font-size:9.5px;letter-spacing:.06em}
.cls-app .gauge .sub,.cls-app .gauge a{font-size:10.5px}
.cls-app .scores .inner>div:last-child{margin-left:0!important;flex:1 1 100%;justify-content:flex-end}
}
.cls-app .badge{display:inline-block;font-family:var(--head);font-size:10.5px;padding:3px 9px;border-radius:var(--r-pill);background:var(--bg3);border:1px solid var(--line);color:var(--tx2);font-weight:700;letter-spacing:.04em}
.cls-app .badge.ok{color:var(--good);border-color:var(--good-line)}
.cls-app .badge.warn{color:var(--warn);border-color:var(--warn-line)}
.cls-app .badge.bad{color:var(--bad);border-color:rgba(194,44,44,.4)}
.cls-app table{width:100%;border-collapse:collapse;font-size:13px}
.cls-app th,.cls-app td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.cls-app th{font-family:var(--head);color:var(--tx3);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.cls-app .bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;min-width:70px}
.cls-app .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--warn))}
.cls-app .exp-item{border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:10px;background:var(--bg)}
.cls-app .exp-item .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cls-app .doc{background:#fff;color:#111;padding:34px 40px;border-radius:13px;font-family:Georgia,'Times New Roman',serif;
  font-size:14px;line-height:1.65;white-space:pre-wrap;min-height:300px;border:1px solid var(--line);box-shadow:var(--sh-card)}
.cls-app .doc:focus{outline:none;border-color:var(--ac2);box-shadow:0 0 0 4px var(--ac-ring)}
.cls-app .docwrap{max-height:none}
.cls-app .toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:var(--tx);border:1px solid var(--tx);
  color:var(--bg2);padding:11px 20px;border-radius:13px;z-index:200;font-family:var(--head);font-size:13.5px;font-weight:600;
  box-shadow:0 10px 34px -12px rgba(21,12,44,.6);opacity:0;pointer-events:none;transition:.25s var(--ease)}
.cls-app .toast.on{opacity:1;bottom:120px}
.cls-app .spin{display:inline-block;width:13px;height:13px;border:2px solid var(--ac-ring);border-top-color:var(--ac);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.cls-app .empty{color:var(--tx3);font-size:13px;padding:16px;text-align:center;border:1px dashed var(--line);border-radius:13px}
.cls-app details{border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin-bottom:10px;background:var(--bg)}
.cls-app summary{cursor:pointer;font-family:var(--head);font-weight:650;font-size:13.5px;color:var(--tx)}
.cls-app summary:hover{color:var(--ac)}
.cls-app .kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-bottom:1px dashed var(--line)}
.cls-app .kv:last-child{border:0}
.cls-app .drop{border:2px dashed var(--line);border-radius:14px;padding:28px 16px;text-align:center;color:var(--tx2);cursor:pointer;background:var(--bg);transition:.2s var(--ease)}
.cls-app .drop:hover,.cls-app .drop.over{border-color:var(--ac2);color:var(--ac);background:var(--ac-soft)}
.cls-app .note{background:var(--ac-soft);border:1px solid var(--ac-ring);border-radius:12px;padding:10px 13px;font-size:12.5px;color:var(--tx2);margin-bottom:12px}
.cls-app .note.warn{background:var(--warn-soft);border-color:var(--warn-line)}
@media print{body>header,.utility,.site-header,.page-hero,.cta-band,.site-footer,.cls-tabs,.cls-app .scores,.cls-app .noprint{display:none!important}body{background:#fff;color:#000}.cls-wrap{padding:0;max-width:none}.cls-app .card{border:0;box-shadow:none;padding:0}.cls-app .doc{border:0;padding:0;box-shadow:none}}

/* site.css uses the same class names for other things: undo what would leak in */
.cls-app .panel{background:none;border:0;border-radius:0;padding:0;box-shadow:none;max-width:none}
.cls-app button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2;white-space:nowrap}
.cls-app h1,.cls-app h2{font-family:var(--head)}
.cls-app .note{font-size:12.5px}
.cls-app{background:transparent;border-radius:var(--r);padding:2px 0 0}
body.dark .cls-app{background:var(--bg)}
body.dark .cls-app{padding:18px;border-radius:20px}
/* the tool's tabs use the site's filter pills (.tabs); the selected tab is indigo */
.cls-tabs{margin:0 0 20px;scroll-margin-top:96px}
.cls-section{padding-top:40px}
/* the score bar sticks to the bottom of the window only while the tool is on screen,
   so it never covers the orange band or the footer */
.cls-app .scores{position:sticky;left:auto;right:auto;bottom:12px;margin-top:22px;border:1px solid var(--line);border-radius:18px}
.cls-app .scores .inner{padding:10px 12px}
@media(max-width:620px){
  .cls-app .scores .inner{padding:8px}
  .cls-app .scores .inner>div:last-child{flex:1 1 calc(50% - 4px);justify-content:center;align-items:center}
}