/* Skills Gap Analysis Calculator — tool-only rules on top of assets/tools/_kit/tool-kit.css */
.calc{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);}
.calc-in,.calc > .flip{min-width:0;}
.sg-step2{margin-top:30px;}
.sg-actions{margin-top:12px;}
.sg-jump{display:none;}

/* Step 1: one compact line per skill under a single header row; labels stay for screen readers. */
.sg-skills{display:grid;gap:6px;}
.sg-skill,.sg-skill-head{display:grid;grid-template-columns:minmax(150px,1.6fr) minmax(128px,1fr) minmax(118px,.9fr) 44px;gap:6px;align-items:center;}
.sg-skill{background:#F7F8FC;border-radius:12px;padding:6px;}
.sg-skill-head{padding:0 6px 2px;font:700 10px 'Poppins',sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--grey);}
.sg-skill .tk-field{gap:3px;}
.sg-skill .tk-field > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sg-skill .tk-input{min-height:44px;}
.sg-skill .tk-input input,.sg-skill .tk-input select{height:44px;font-size:14px;padding-left:10px;}
.sg-skill .tk-input select{padding-right:28px;background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;}
.sg-del{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:20px;cursor:pointer;flex:none;}
.sg-del:hover{border-color:var(--pink);color:var(--pink);}
.sg-del:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.sg-empty{padding:16px;border:1px dashed var(--line);border-radius:14px;color:var(--grey);font-size:14px;text-align:center;}
.tk-btn[disabled]{opacity:.5;cursor:not-allowed;}
.sg-limit{margin:8px 0 0;font-weight:700;color:var(--navy);}
.sg-limit:empty{display:none;}

.sg-scale{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:0 14px;}
.sg-scale summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:700 14px 'Lato',sans-serif;color:var(--cyan-d);}
.sg-scale summary:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px;}
.sg-scale dl{display:grid;gap:8px;margin:0 0 10px;}
.sg-scale dl div{display:grid;grid-template-columns:130px 1fr;gap:10px;font-size:14px;line-height:1.45;}
.sg-scale dt{font-weight:700;color:var(--navy);} .sg-scale dt b{font-family:'Roboto Slab',serif;margin-right:4px;}
.sg-scale dd{margin:0;color:#3a4256;}
.sg-scale .tk-help{margin-bottom:12px;}

/* Step 2: the input matrix scrolls inside its own box; the name column stays put. */
/* contain:paint stops phones widening the whole page to the table's width (seen in Chrome mobile emulation). */
.sg-matrix-wrap,.sg-heat-wrap,.sg-people-wrap{contain:paint;}
.sg-matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;-webkit-overflow-scrolling:touch;}
.sg-matrix-wrap:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.sg-matrix{border-collapse:separate;border-spacing:0;min-width:100%;font-size:14px;}
.sg-matrix th,.sg-matrix td{padding:5px 4px;border-bottom:1px solid var(--line);vertical-align:middle;}
.sg-matrix tbody tr:last-child th,.sg-matrix tbody tr:last-child td{border-bottom:0;}
.sg-matrix thead th{font:700 11px/1.25 'Poppins',sans-serif;color:var(--navy);text-align:left;background:#F7F8FC;vertical-align:bottom;padding-top:9px;padding-bottom:7px;}
.sg-matrix thead th small{display:block;font:600 10px 'Poppins',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-top:2px;}
.sg-mh{min-width:76px;max-width:120px;}
.sg-mh-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto;}
.sg-corner,.sg-pname{position:sticky;left:0;z-index:2;background:#fff;}
.sg-corner{background:#F7F8FC;padding-left:10px !important;font:700 10px 'Poppins',sans-serif !important;letter-spacing:.03em;text-transform:uppercase;color:var(--grey) !important;}
.sg-pname{min-width:124px;padding-left:6px !important;box-shadow:6px 0 8px -6px rgba(12,28,77,.18);}
.sg-pname input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:700 14px 'Lato',sans-serif;color:var(--navy);background:#fff;}
.sg-pname input:focus-visible{outline:3px solid var(--cyan);outline-offset:1px;}
.sg-cell{position:relative;}
.sg-cell select{width:100%;min-width:60px;height:44px;border:1px solid var(--line);border-left:5px solid var(--edge,#C6CFE8);border-radius:10px;padding:0 22px 0 10px;font:700 16px 'Roboto Slab',serif;color:var(--navy);background:#fff;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 14px) 20px,calc(100% - 9px) 20px;background-size:5px 5px;background-repeat:no-repeat;}
.sg-cell select:focus-visible{outline:3px solid var(--cyan);outline-offset:1px;}
.sg-cell[data-g="0"]{--edge:#1FA86F;} .sg-cell[data-g="1"]{--edge:#F2A100;} .sg-cell[data-g="2"]{--edge:#C4004F;}
.sg-deltd{width:52px;}
.sg-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px;font-size:13px;color:#3a4256;}
.sg-key b{font-family:'Roboto Slab',serif;color:var(--navy);margin-right:3px;}

.sg-paste{margin-top:14px;}
.sg-paste textarea{width:100%;min-height:130px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:15px/1.5 'Lato',sans-serif;color:var(--navy);background:#F7F8FC;resize:vertical;}
.sg-paste textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:1px;}
.sg-paste[hidden]{display:none;}
.sg-paste-msg{min-height:20px;font-weight:700;color:var(--navy);}

/* Result face */
.sg-hl-label{margin-top:14px;}
.sg-hl-sub{margin-top:10px;}
.sg-focus{margin-top:18px;}
.sg-focus-h{font:700 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 8px;}
.sg-focus-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:f;}
.sg-focus-list li{counter-increment:f;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 10px;font-size:13.5px;line-height:1.35;color:#fff;}
.sg-focus-list li::before{content:counter(f);width:24px;height:24px;border-radius:50%;background:#C4004F;color:#fff;display:flex;align-items:center;justify-content:center;font:700 11px 'Roboto Slab',serif;}
.sg-focus-list li b{font:700 15px 'Roboto Slab',serif;color:#FF9EC4;}
/* Light pink keeps small numbers AA (>=5.8:1) anywhere on the result gradient, however tall the panel. */
.result .tk-kpis div:nth-child(even) b{color:#FF9EC4;}
#tk-face-front{scroll-margin-top:96px;}
.tk-recs li.none{grid-template-columns:1fr;} .tk-recs li.none::before{display:none;}
.sg-focus-list li.none{grid-template-columns:1fr;color:rgba(255,255,255,.82);}
.sg-focus-list li.none::before{display:none;}
#sg-band[data-c=yellow]{background:var(--yellow);color:var(--navy);}

/* Detail: heatmap full width, then priorities and recommendations side by side. */
.sg-wide{grid-column:1 / -1;}
.sg-heat-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:4px;}
.sg-heat{border-collapse:separate;border-spacing:4px;font-size:14px;min-width:100%;}
.sg-heat th{text-align:left;font:700 13px 'Lato',sans-serif;color:var(--navy);padding:4px 8px 4px 0;}
.sg-heat thead th{font:700 11.5px/1.25 'Poppins',sans-serif;vertical-align:bottom;min-width:88px;max-width:140px;}
.sg-heat thead th:first-child{min-width:0;}
.sg-hh{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto;}
.sg-heat thead small{display:block;font:600 10px 'Poppins',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-top:3px;}
.sg-heat tbody th,.sg-heat tfoot th{position:sticky;left:0;background:#fff;z-index:1;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis;}
.sg-heat td{height:40px;text-align:center;border-radius:8px;font:700 15px 'Roboto Slab',serif;}
/* Meets: navy on green; 1 below: navy on yellow; 2+ below: white on deep pink (all AA). */
.sg-heat td.g0{background:#2BC488;color:#0C1C4D;} .sg-heat td.g1{background:#FCBF26;color:#0C1C4D;} .sg-heat td.g2{background:#C4004F;color:#fff;}
.sg-heat tfoot td{background:#F4F6FB;color:var(--navy);font-size:14px;}
.sg-heat tfoot td.risk{background:#FFE0EC;color:#C4004F;}
.sg-heat tfoot th{font:700 10.5px 'Poppins',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);}
.sg-warn{margin-left:4px;}
.sg-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:13px;color:#3a4256;}
.sg-legend span{display:inline-flex;align-items:center;gap:6px;}
.sg-legend i{width:16px;height:12px;border-radius:3px;display:inline-block;}
.sg-legend i.g0{background:#2BC488;} .sg-legend i.g1{background:#FCBF26;} .sg-legend i.g2{background:#C4004F;}
.sg-legend-risk b{color:#C4004F;font-family:'Roboto Slab',serif;}
.sg-bars svg{max-width:100%;}
.sg-bars .sg-bl{font:700 13px 'Lato',sans-serif;fill:#0C1C4D;}
.sg-bars .sg-bv{font:700 14px 'Roboto Slab',serif;fill:#C4004F;}
.sg-bars .sg-bv.none{font:600 12px 'Poppins',sans-serif;fill:#6B7385;}
.sg-h3{margin-top:22px !important;font-size:17px !important;}
.sg-risks{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.sg-risks li{border-radius:12px;background:#FFF4F8;border:1px solid #FFD0E2;padding:10px 12px;font-size:14px;line-height:1.5;color:#3a4256;}
.sg-risks li b{display:block;color:var(--navy);}
.sg-risks li.ok{background:#EFFBF5;border-color:#C5EFDA;}
.sg-people-wrap{overflow-x:auto;}
.sg-people th[scope=row]{font:700 14px 'Lato',sans-serif;color:var(--navy);text-transform:none;letter-spacing:0;}
.sg-sc-line{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;}
.sg-sc-line a{font-weight:700;color:#C4004F;}

@media(max-width:1100px){.calc{grid-template-columns:minmax(0,1fr);} .sg-jump{display:inline-flex;}}
@media(max-width:720px){
  .sg-skill-head{display:none;}
  .sg-skill{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 44px;padding:12px;gap:8px;}
  .sg-skill .tk-input select{font-size:13.5px;padding-right:26px;}
  .sg-skill .tk-field > label{position:static;width:auto;height:auto;clip:auto;font:700 11px 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);}
  .sg-skill .sg-sname{grid-column:1 / 3;grid-row:1;}
  .sg-skill .sg-del{grid-column:3;grid-row:1;align-self:end;}
  .sg-skill .sg-sreq{grid-column:1;grid-row:2;} .sg-skill .sg-simp{grid-column:2 / 4;grid-row:2;}
  .sg-scale dl div{grid-template-columns:1fr;gap:2px;}
  .sg-pname{min-width:108px;}
}