/* Deal screener. Extends summit.css + summit-dash.css; defines only what those lack.
   Class prefix sk- so it cannot collide with su- (shell) or sd- (dashboard). */

.sk-steps { display: grid; gap: 1.25rem; }

/* --- the employer chooser: a grid of real industries, not a dropdown --- */
.sk-presets {
  display: grid; gap: .5rem; margin: 0 0 1rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.sk-preset {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid var(--su-line, #d9d9e3); background: var(--su-card, #fff);
  font: 600 .92rem/1.25 var(--font-heading, system-ui); color: var(--su-ink, #1c1c28);
}
.sk-preset:hover { border-color: var(--su-accent, #413494); }
.sk-preset[aria-pressed="true"] {
  border-color: var(--su-accent, #413494);
  box-shadow: inset 0 0 0 2px var(--su-accent, #413494);
}
.sk-preset small {
  display: block; margin-top: .25rem; font: 400 .74rem/1.3 var(--font-body, Georgia, serif);
  color: var(--su-mute, #5a5a6e);
}

.sk-size { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 0; }
.sk-size label { font: 600 .92rem var(--font-heading, system-ui); }
.sk-size input[type="number"] {
  width: 7.5rem; padding: .5rem .6rem; border-radius: 8px;
  border: 1px solid var(--su-line, #d9d9e3); font: 600 1rem var(--font-heading, system-ui);
}

/* --- the verdict --- */
.sk-verdict { margin: 1.25rem 0 0; padding: 1.1rem 1.2rem; border-radius: 12px;
              border-left: 5px solid var(--su-accent, #413494);
              background: var(--su-card, #fff); }
.sk-verdict-h { margin: 0 0 .4rem; font: 700 1.28rem/1.3 var(--font-heading, system-ui); }
.sk-verdict-p { margin: 0; font: 400 1rem/1.55 var(--font-body, Georgia, serif); }
.sk-h3 { font-size: 1.05rem; margin: 1.4rem 0 .2rem; }
.sk-verdict[data-dir="up"]   { border-left-color: #2f7d4f; }
.sk-verdict[data-dir="down"] { border-left-color: #b4632a; }
.sk-verdict[data-dir="flat"] { border-left-color: var(--su-mute, #5a5a6e); }

/* --- the two indexes, on one shared track so the comparison is visual --- */
.sk-track { margin: 1.1rem 0 .25rem; }
.sk-track-bar { position: relative; height: 40px; border-radius: 8px;
                background: linear-gradient(90deg, #f0eef7, #e3dff1); }
.sk-pin { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; }
.sk-pin-place { background: var(--su-mute, #5a5a6e); }
.sk-pin-deal  { background: var(--su-accent, #413494); }
.sk-pin span {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 600 .76rem var(--font-heading, system-ui);
}
.sk-pin-place span { top: -1.35rem; color: var(--su-mute, #5a5a6e); }
.sk-pin-deal  span { bottom: -1.5rem; color: var(--su-accent, #413494); }
.sk-track-ends { display: flex; justify-content: space-between; margin-top: 1.9rem;
                 font: 400 .74rem var(--font-body, Georgia, serif); color: var(--su-mute, #5a5a6e); }

/* --- capability movement --- */
.sk-moves { display: grid; gap: .3rem; margin: 1rem 0 0; }
.sk-move { display: grid; grid-template-columns: 1fr 120px 92px; align-items: center;
           gap: .6rem; padding: .32rem 0;
           border-bottom: 1px solid var(--su-line-soft, #edecf2); }
.sk-move-n { font: 600 .9rem var(--font-heading, system-ui); }
.sk-move-n em { font: 400 .74rem var(--font-body, Georgia, serif);
                color: var(--su-mute, #5a5a6e); font-style: normal; display: block; }
.sk-bar { position: relative; height: 12px; background: var(--su-line-soft, #edecf2);
          border-radius: 6px; }
.sk-bar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.sk-bar i.up   { background: #2f7d4f; }
.sk-bar i.down { background: #b4632a; }
.sk-bar b { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px;
            background: var(--su-mute, #9a9aae); }
.sk-move-v { text-align: right; font: 600 .86rem var(--font-heading, system-ui);
             font-variant-numeric: tabular-nums; }

/* --- the job mix, shown so the number is auditable --- */
.sk-mix { width: 100%; border-collapse: collapse; margin: .6rem 0 0;
          font: 400 .86rem var(--font-body, Georgia, serif); }
.sk-mix th { text-align: left; font: 600 .78rem var(--font-heading, system-ui);
             color: var(--su-mute, #5a5a6e); padding: .3rem .4rem;
             border-bottom: 1px solid var(--su-line, #d9d9e3); }
.sk-mix td { padding: .28rem .4rem; border-bottom: 1px solid var(--su-line-soft, #edecf2); }
.sk-mix .num { text-align: right; font-variant-numeric: tabular-nums; }
.sk-mix input {
  width: 5rem; padding: .22rem .4rem; text-align: right;
  border: 1px solid var(--su-line, #d9d9e3); border-radius: 6px;
  font: 600 .86rem var(--font-heading, system-ui); font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .sk-move { grid-template-columns: 1fr 78px; }
  .sk-move .sk-bar { display: none; }
}