/* Skill tree screen. Everything here lives inside #skillsRoot and borrows the
   app's cards, stats, pills and buttons; only the pieces the design system has
   no class for are defined below. Tokens only, so both themes work.

   The look follows the Health screen on purpose: same card rhythm, same
   uppercase labels, same 1 to 5 pick row, so the two screens read as one app. */

.skstrip{margin-bottom:14px}
.skstrip:empty{display:none}
#skPanel .card{margin-bottom:14px}

/* ------------------------------------------------------ the skill open head */
.skhead{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.skhead h2{font:800 22px/1.2 var(--mono);color:var(--ink)}
.skhead .sub{margin-top:4px;max-width:60ch}

/* ------------------------------------------------------------ what is next */
.sknext-b{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.sknext-b>div{min-width:0;flex:1 1 260px}
.sknext-b b{display:block;font:800 17px/1.25 var(--mono);color:var(--ink)}
.skdrill{
  margin-top:10px;padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
  font-size:13px;line-height:1.55;color:var(--mute);
}
.skdrill b{display:inline;font:800 13px/1.5 var(--mono);color:var(--hot)}

/* ------------------------------------------------------------ the tree grid */
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.skcard{
  display:grid;gap:7px;text-align:left;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel2);transition:.15s;
}
.skcard:hover{border-color:var(--hot);transform:translateY(-2px)}
.skcard:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.skcard-h{display:flex;gap:9px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.skcard-h b{font:800 15px/1.2 var(--mono);color:var(--ink)}
.skcard-h .pill{flex:none}
.skcard-s{font-size:12.5px;line-height:1.5;color:var(--mute)}
.skcard-m{font:700 10px/1.4 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}

/* ---------------------------------------------------- what good looks like */
.skgood{list-style:none;display:grid;gap:9px;margin-top:10px}
.skgood li{
  position:relative;padding-left:22px;font-size:13.5px;line-height:1.6;color:var(--ink);
}
.skgood li::before{
  content:"";position:absolute;left:3px;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--hot);
}

/* ------------------------------------------------------------------ drills */
.skdrills{display:grid;gap:8px;margin-top:10px}
.skd{
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
}
.skd>div{min-width:0;flex:1 1 220px}
.skd b{display:block;font:800 13.5px/1.3 var(--mono);color:var(--ink)}
.skd p{margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--mute)}

/* --------------------------------------------------- the specialists studied */
.skpeople{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-top:10px}
.skp{padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.skp b{display:block;font:800 13.5px/1.3 var(--mono);color:var(--hot)}
.skp span{display:block;margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--mute)}

/* ------------------------------------------------- the cited study nodes */
.sknodes{display:grid;gap:8px;margin-top:12px}
.sknode{padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.sknode b{display:block;font:800 11px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--hot);margin-bottom:7px}
.sknode p{font-size:13.5px;line-height:1.6;color:var(--ink)}
.sksrc{
  display:inline-block;margin-top:8px;font:700 11px/1.4 var(--mono);color:var(--cool);
  text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;
}
.sksrc:hover{color:var(--hot)}
.sksrc.none{color:var(--dim);text-decoration:none}

/* ------------------------------------------------------------- the log form */
.skform{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.skform .wide{grid-column:1/-1}
.sklab{display:grid;gap:5px;font:800 10px/1.2 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute)}
.sklab input,.sklab select{
  width:100%;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:600 14px/1.2 var(--sans);
}
.sklab input:focus,.sklab select:focus{outline:2px solid var(--hot);outline-offset:1px}
.sklab input::placeholder{color:var(--dim)}
.skacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

.skscale{margin-top:16px}
.skscale-h b{display:block;font:800 14px/1.3 var(--mono);color:var(--ink)}
.skscale-h small{display:block;margin-top:2px;font-size:12px;color:var(--mute)}
.skpick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.skpick button{
  min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  color:var(--mute);font:800 17px/1 var(--mono);transition:.14s;
}
.skpick button:hover{border-color:var(--hot);color:var(--ink)}
.skpick button.on{border-color:var(--hot);color:var(--hot);background:rgba(255,90,31,.14)}
.skpick button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.skends{display:flex;justify-content:space-between;margin-top:7px;font:700 10px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--dim)}

/* ------------------------------------------------------------- the log rows */
.skrows{display:grid;gap:8px;margin-top:12px}
.skrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
}
.skrow-t{min-width:0}
.skrow-t b{display:block;font:800 13px/1.3 var(--mono);color:var(--ink)}
.skrow-t span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
.skrow-t em{display:block;margin-top:3px;font-style:normal;font-size:12px;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
.skrow-m{text-align:right;white-space:nowrap}
.skrow-m span{display:block;font:800 12.5px/1.3 var(--mono);color:var(--hot)}
.skrow-m small{display:block;margin-top:3px;font:700 10px/1 var(--mono);color:var(--dim)}
.skdel{padding:7px 12px;font-size:11px}
@media(max-width:640px){
  .skrow{grid-template-columns:1fr auto;grid-template-areas:"t t" "m d";row-gap:10px}
  .skrow-t{grid-area:t}
  .skrow-m{grid-area:m;text-align:left}
  .skdel{grid-area:d;justify-self:end}
}

/* -------------------------------------------------------- the honesty line
   This is the sentence that keeps the whole screen honest. It is quiet, but it
   is never hidden and never collapsed away. */
.skplain{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--mute)}
.card .skplain{margin-top:12px}