:root{
  --bg:#f3f5f6;
  --card:#ffffff;
  --muted:#7b8790;
  --accent:#2b6cff;

  --cols: 7;
  --rows: 6;
  --tile-size: calc(56px * 1.1);
  --slot-size: var(--tile-size);

  --ctrl-space: calc(60px * 0.6);
  --ctrl-btn-size: calc(40px * 0.6);
  --ctrl-font-size: calc(34px * 0.6);

  --gap-x:14px;
  --gap-y:18px;

  --cell-width: calc(var(--slot-size) + (var(--ctrl-space) * 2));
  --grid-width: calc(var(--cell-width) * var(--cols) + var(--gap-x) * (var(--cols) - 1));

  --radius:8px;
  --small-box:20px;
  --danger:#e11d48;
}

html,body{
  height:100%;
  margin:0;
  font-family:Inter, Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#0b1320;
}

.container{
  max-width: 1200px;
  margin:20px auto;
  padding:18px;
  box-sizing:border-box;
}

header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
h1{ font-size:18px; margin:0; font-weight:700; }
.sub{ color:var(--muted); font-size:13px; }

.controls{ display:flex; gap:8px; align-items:center; }

.global-counter{ font-weight:700; font-size:14px; color:#24303a; margin-right:8px; }
.global-counter.over{ color: var(--danger); }

button{ background:white; border:1px solid #e6e9ee; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px; }

.job-section{
  margin:14px auto;
  padding:12px;
  background:var(--card);
  border-radius:10px;
  border:1px solid #e8edf1;
  box-shadow:0 4px 12px rgba(16,24,40,0.04);
  max-width: calc(var(--grid-width) + 48px);
  box-sizing: border-box;
}

.job-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:16px; }
.job-left{ display:flex; align-items:center; gap:12px; }
.job-title{ font-weight:700; font-size:15px; color:#24303a; }
.job-sub{ font-size:13px; color:var(--muted); }

.tree-counter{ font-weight:700; font-size:13px; color:#24303a; }
.tree-counter.over{ color: var(--danger); }

.grid{
  width: var(--grid-width);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(var(--cols), var(--cell-width));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  align-items:start;
  box-sizing: border-box;
}

.skill-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:var(--cell-width);
  box-sizing:border-box;
}

.skill-name{
  display:block;
  font-size:12px;
  color:#334155;
  text-align:center;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 4px;
  box-sizing:border-box;
  margin-bottom:4px;
}

.slot-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  position:relative;
  height: var(--slot-size);
}

.slot{
  width:var(--slot-size);
  height:var(--slot-size);
  min-width:var(--slot-size);
  min-height:var(--slot-size);
  border-radius:8px;
  background:linear-gradient(180deg,#fbfdff,#f6f8fb);
  position:relative;
  box-shadow:0 1px 0 rgba(16,24,40,0.03) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  transition:transform .08s ease;
  outline:none;
  box-sizing:border-box;
  overflow:hidden;
  flex: 0 0 auto;
  z-index:1;
}

.slot.empty.invisible{
  background:transparent;
  box-shadow:none;
  border:none;
  pointer-events:none;
  opacity:0;
}

.icon{
  width: calc(var(--slot-size) - 26px);
  height: calc(var(--slot-size) - 26px);
  max-width:100%;
  max-height:100%;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:white;
  font-weight:700;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  position:relative;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.initials{ display:none !important; }

.ctrl-btn{
  width:var(--ctrl-btn-size);
  height:var(--ctrl-btn-size);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:white;
  color:#1f2937;
  font-weight:700;
  font-size:var(--ctrl-font-size);
  border:1px solid rgba(16,24,40,0.06);
  cursor:pointer;
  box-shadow:0 2px 6px rgba(11,19,32,0.06);
  line-height:1;
  transform: scale(1);
  opacity:1;
  visibility:visible;
  transition: transform .12s ease, opacity .12s ease;
  flex: 0 0 auto;
  z-index:3;
}
.ctrl-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.slot.fixed{
  box-shadow: inset 0 0 0 2px rgba(128,128,128,0.05);
  background: linear-gradient(180deg,#f8fafc,#f2f4f6);
}

.level-counter-below{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:#24303a;
  text-align:center;
  width:100%;
}
.level-counter-below.over{ color: var(--danger); }

/* TOOLTIP: allow the floating box to grow to fit content (no inner scrollbar) */
.tooltip{
  position:fixed;
  left:18px;
  top:18px;
  pointer-events:auto; /* allow interactions inside tooltip */
  z-index:9999;
  width:360px;
  max-width:40vw;
  background:#0b1320;
  color:#fff;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  box-shadow:0 8px 24px rgba(2,6,23,0.35);
  opacity:0;
  transition:opacity .08s linear, max-height .12s ease;
  /* remove any max-height so it grows with content */
  max-height: none;
  overflow: visible;
}
.tooltip.show{ opacity:1; pointer-events:auto; }
.tooltip .tt-job{ font-size:12px; color:#9aa6b2; margin-bottom:6px; }
.tooltip .tt-skill{ font-weight:700; margin-bottom:6px; }
.tooltip .tt-desc{ font-size:13px; color:#d9e2ec; margin-bottom:6px; }
.tooltip .tt-meta{ font-size:12px; color:#9aa6b2; margin-bottom:6px; }

.tooltip .tt-inline{
  font-size:12px;
  color:#ffd1d9;
  background:rgba(255,77,77,0.08);
  border:1px solid rgba(255,77,77,0.12);
  padding:6px 8px;
  border-radius:6px;
  margin-bottom:8px;
  display:block;
}

.tooltip .tt-prereq{
  font-size:12px;
  color:#ffe7c2;
  background:rgba(255,190,77,0.06);
  border:1px solid rgba(255,190,77,0.08);
  padding:6px 8px;
  border-radius:6px;
  margin-top:6px;
}

.tooltip .tt-autofill{ margin-top:8px; font-size:12px; color:#d9eec; background:rgba(255,255,255,0.03); padding:6px; border-radius:6px; border:1px solid rgba(255,255,255,0.04); }

/* remove restriction that caused internal scrollbar; table will expand */
.tooltip .tt-table{
  margin-top:8px;
  max-height: none;
  overflow: visible;
  border-radius:6px;
  padding:4px 0;
}
.tooltip .tt-table table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.tooltip .tt-table th, .tooltip .tt-table td{
  padding:6px 8px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.tooltip .tt-table th{
  font-size:12px;
  font-weight:700;
  color:#9aa6b2;
}
.tooltip .tt-table td.effect{
  color:#d9eec;
  white-space:normal;
  word-break:break-word;
}

.section-footer{ margin-top:10px; font-size:13px; color:var(--muted); }

@media (max-width: 1100px){
  :root { --cols: 7; }
}
@media (max-width: 900px){
  :root { --cols: 5; }
  .grid{ grid-template-columns: repeat(var(--cols), var(--cell-width)); width: calc(var(--cell-width) * var(--cols) + var(--gap-x) * (var(--cols) - 1)); }
  .job-section{ max-width: calc(var(--cell-width) * var(--cols) + var(--gap-x) * (var(--cols) - 1) + 48px); }
  .tooltip{ left: 12px; top: 12px; width: 320px; }
}
@media (max-width: 640px){
  :root { --cols: 4; --slot-size: calc(var(--tile-size) * 0.9); }
  .grid{ grid-template-columns: repeat(var(--cols), var(--cell-width)); width: calc(var(--cell-width) * var(--cols) + var(--gap-x) * (var(--cols) - 1)); }
  .job-section{ max-width: calc(var(--cell-width) * var(--cols) + var(--gap-x) * (var(--cols) - 1) + 48px); }
  .tooltip{ left: 10px; top: 10px; width: 280px; }
}
.job-side-icons {
  position: absolute;
  top: 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index: 6;
  /* Allow pointer events on the wrapper so anchors/images are clickable */
  pointer-events: auto;
}
.job-side-icons.left { left: -250px; align-items:flex-start; }
.job-side-icons.right { right: -250px; align-items:flex-start; }
.job-side-icons a {
  pointer-events: auto;
  display:block;
  text-decoration:none;
}
.job-side-icons img {
  width:200px;
  height:200px;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(2,6,23,0.12);
  background:#fff;
  display:block;
  pointer-events: auto;
}
.job-side-icons img.hovering {
  transform: scale(1.02);
  transition: transform .12s ease;
}
@media (max-width:900px){
  .job-side-icons.left { left: -56px; }
  .job-side-icons.right { right: -56px; }
}

/* === THEME OVERRIDES (dark mode via data-theme="dark" on <html>) === */
:root{
  --light-bg: #f3f5f6;
  --light-card: #ffffff;
  --light-text: #0b1320;
  --light-muted: #7b8790;
  --light-accent: #2b6cff;

  --dark-bg: #0b1116;
  --dark-card: #0f1720;
  --dark-text: #e6eef7;
  --dark-muted: #9aa6b2;
  --dark-accent: #60a5fa;
}

/* When document.documentElement.dataset.theme === 'dark' */
:root[data-theme="dark"] {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

/* General page background + card adjustments */
:root[data-theme="dark"] html, :root[data-theme="dark"] body {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Job section cards */
:root[data-theme="dark"] .job-section {
  background: var(--dark-card) !important;
  border-color: rgba(255,255,255,0.03) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}

/* Text / muted */
:root[data-theme="dark"] .skill-name,
:root[data-theme="dark"] .section-footer,
:root[data-theme="dark"] .job-sub {
  color: var(--dark-muted) !important;
}

/* Global counters */
:root[data-theme="dark"] .global-counter,
:root[data-theme="dark"] .tree-counter,
:root[data-theme="dark"] .level-counter-below {
  color: var(--dark-text) !important;
}

/* Slot background & icon contrast */
:root[data-theme="dark"] .slot {
  background: linear-gradient(180deg, #0b1319, #0d1a22) !important;
  box-shadow: 0 2px 10px rgba(2,6,23,0.6) inset;
}

/* ctrl buttons */
:root[data-theme="dark"] .ctrl-btn {
  background: #0f1720;
  color: var(--dark-text);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

/* Tooltip adjustments */
:root[data-theme="dark"] .tooltip {
  background: #06121a !important;
  color: var(--dark-text) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.75) !important;
}
:root[data-theme="dark"] .tooltip .tt-job,
:root[data-theme="dark"] .tooltip .tt-meta { color: var(--dark-muted); }
:root[data-theme="dark"] .tooltip .tt-desc,
:root[data-theme="dark"] .tooltip .tt-autofill,
:root[data-theme="dark"] .tooltip .tt-table td.effect { color: #dbeefc; }

/* Side icons (ensure visible on dark) */
:root[data-theme="dark"] .job-side-icons img {
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  background: #071118;
}

/* Theme toggle button styles (small, matching existing look) */
#themeToggle {
  border-radius:8px;
  padding:8px 10px;
  background: white;
  border:1px solid #e6e9ee;
  cursor:pointer;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
:root[data-theme="dark"] #themeToggle {
  background: #0f1720;
  color: var(--dark-text);
  border:1px solid rgba(255,255,255,0.06);
}