:root{
  --ink:#15181d;
  --ink-soft:#5b6470;
  --paper:#faf8f4;
  --card:#ffffff;
  --blue:#2f6fb0;
  --blue-deep:#1f4a78;
  --accent:#f4c20d;
  --line:#e7e2d8;
  --line-strong:#d4cdbf;

  --s1:.4rem; --s2:.8rem; --s3:1.2rem; --s4:1.8rem; --s5:2.8rem; --s6:4rem; --s7:6rem;

  --radius:18px;
  --max-width:1080px;
  --transition:160ms ease;

  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
}

*{box-sizing:border-box;}

body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;}

button,
input{font:inherit;}

button{border:0;}

h1{margin:0 0 var(--s3);font-size:clamp(3rem,7vw,6rem);line-height:.98;letter-spacing:-.02em;max-width:14ch;}
h2{margin:0;font-size:clamp(1.6rem,3.5vw,2.4rem);line-height:1.05;}
h3{margin:0 0 .35rem;font-size:1.1rem;font-weight:600;}
p{margin-top:0;}

.display{font-family:"Newsreader",Georgia,serif;font-weight:600;line-height:.98;letter-spacing:-.02em;}

.eyebrow{
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 var(--s3);
}

.tagline{color:var(--ink-soft);font-size:1.12rem;line-height:1.6;max-width:54ch;margin:var(--s3) 0 0;}

.small-count,
.empty-state,
.result-meta,
.selected-skill p,
.category-copy,
.domain-copy,
.generate-banner span,
.ready-modal-card .tagline,
.level-tooltip{color:var(--ink-soft);line-height:1.6;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s3);
  padding:var(--s4);
  position:relative;
  z-index:20;
}
.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.7rem;
  flex-wrap:wrap;
}
.topbar-actions > [data-topbar-view]{display:none;}
body[data-view="domains"] .topbar-actions > [data-topbar-view~="domains"],
body[data-view="domain-detail"] .topbar-actions > [data-topbar-view~="domain-detail"],
body[data-view="category-detail"] .topbar-actions > [data-topbar-view~="category-detail"],
body[data-view="dashboard"] .topbar-actions > [data-topbar-view~="dashboard"],
body[data-view="comparisons"] .topbar-actions > [data-topbar-view~="comparisons"],
body[data-view="comparison-result"] .topbar-actions > [data-topbar-view~="comparison-result"]{
  display:flex;
}

.app-shell{min-height:100vh;}

.view{display:none;min-height:100%;padding:var(--s5) var(--s4) var(--s6);animation:pageIn 320ms ease both;flex-direction:column;justify-content:center;}
.view.is-active{display:flex;}

.view-panel,
.dashboard-shell{width:min(100%,var(--max-width));margin:0 auto;}
.view-panel{border:0;background:transparent;border-radius:0;}

.landing-panel,
.skills-panel,
.compact-panel,
.category-panel{padding:0;}

.landing-panel{display:grid;gap:var(--s5);}
.landing-panel .display{margin-bottom:0;}
.landing-panel .tagline{margin-top:0;}
.compact-panel{max-width:600px;margin:0 auto;}
.skills-panel{display:block;}
.skills-header.centered-header{
  justify-content:center;
  text-align:center;
}
.skills-header.centered-header > div:first-child{
  justify-items:center;
  text-align:center;
  margin:0 auto;
}
.skills-header.centered-header h1{justify-self:center;}

.domain-grid,
.category-grid,
.summary-grid,
.dashboard-grid,
.results-list,
.breakdown-list{display:grid;gap:var(--s3);}

.primary-button,.ghost-button,.plus-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.95rem 1.6rem;border-radius:12px;
  font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:transform var(--transition),background var(--transition),
             box-shadow var(--transition),border-color var(--transition),color var(--transition),
             opacity var(--transition);
}
.primary-button{background:var(--ink);color:var(--paper);}
.primary-button:hover,.primary-button:focus-visible{
  transform:translateY(-2px);background:var(--blue-deep);
  box-shadow:0 8px 22px -10px rgba(31,74,120,.55);
}
.ghost-button{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.ghost-button:hover,.ghost-button:focus-visible{border-color:var(--blue);color:var(--blue);background:transparent;}

.plus-button{
  min-width:3rem;
  padding:.8rem;
  background:var(--card);
  color:var(--ink);
  border-color:var(--line-strong);
  font-size:1.05rem;
}
.plus-button:hover,.plus-button:focus-visible{
  transform:translateY(-2px);
  border-color:var(--blue);
  color:var(--blue);
}

.primary-button:disabled,.ghost-button:disabled,.plus-button:disabled,.suggestion-row:disabled{
  opacity:.45;cursor:default;transform:none;box-shadow:none;
}

button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

.chrome-button{min-width:3rem;}
.icon-button{width:3rem;padding:0;}
.full-width{width:100%;}

.name-form{display:grid;gap:.7rem;margin-top:var(--s5);}
.field-label{color:var(--ink);font-size:.92rem;font-weight:600;}

input{
  width:100%;min-height:3.2rem;padding:.92rem 1rem;border:1px solid var(--line-strong);
  border-radius:12px;background:var(--card);color:var(--ink);
}

select{
  font:inherit;
  width:100%;
  min-height:3.2rem;
  padding:.92rem 1rem;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
}

.skills-header,
.subpage-header,
.dashboard-hero,
.result-card,
.category-skill-card,
.modal-header,
.column-heading,
.subpage-actions,
.generate-banner,
.ready-modal-actions{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
}

.centered-header{text-align:left;margin-bottom:var(--s5);}
.centered-header > div:first-child{
  display:grid;
  justify-items:start;
  text-align:left;
  min-width:0;
}
.centered-header h1,
.centered-header .tagline{justify-self:start;}
.subpage-header.centered-header{
  justify-content:center;
  text-align:center;
}
.subpage-header.centered-header > div:first-child{
  justify-items:center;
  text-align:center;
  margin:0 auto;
}
.subpage-header.centered-header h1,
.subpage-header.centered-header .tagline{justify-self:center;}
.centered-subheading{justify-content:center;}

.skill-entry-shell{width:min(100%,760px);}

.centered-stage,.search-stage{max-width:640px;margin:0 auto;}
.centered-stage{display:grid;gap:var(--s3);}
.search-stage{display:grid;gap:var(--s3);}

.search-box{
  position:relative;
  display:flex;align-items:center;gap:.7rem;
  width:100%;
  background:var(--card);border:1px solid var(--line-strong);border-radius:14px;
  padding:.2rem .4rem .2rem 1.1rem;
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.search-box:hover{transform:none;}
.search-box::before{
  content:"";
  width:1.1rem;
  height:1.1rem;
  flex:none;
  border:2px solid var(--ink-soft);
  border-radius:50%;
  opacity:.9;
  box-sizing:border-box;
  transform:translateY(-1px);
}
.search-box::after{
  content:"";
  position:absolute;
  left:2.25rem;
  top:calc(50% + .42rem);
  width:.5rem;
  height:2px;
  background:var(--ink-soft);
  border-radius:99px;
  transform:rotate(45deg);
  transform-origin:left center;
}
.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,111,176,.12);}
.search-box .field-label{position:absolute;left:-9999px;}
.search-box input{flex:1;border:0;outline:0;background:transparent;min-height:auto;padding:1rem 0;}

.suggestions-panel,
.search-results-panel,
.uncategorized-skills{width:100%;}

.suggestions-panel{border:0;background:transparent;padding:0;margin-top:var(--s2);}
.suggestions-panel:hover{transform:none;}

.search-results-panel,
.uncategorized-skills{
  padding:0;
  border:0;
  background:transparent;
}

.suggestion-row{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;border:0;border-radius:10px;background:transparent;color:var(--ink);
  cursor:pointer;text-align:left;transition:background var(--transition),color var(--transition),opacity var(--transition);
}
.suggestion-row:hover,.suggestion-row:focus-visible{background:#f1ede4;transform:none;}
.suggestion-row small{color:var(--ink-soft);}
.suggestion-row[disabled] small{color:var(--blue);}

.search-results-header{margin-bottom:var(--s2);}
.search-or{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  color:var(--ink-soft);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.search-or::before,
.search-or::after{
  content:"";
  flex:1;
  max-width:120px;
  height:1px;
  background:var(--line);
}
.browse-button{justify-self:center;}

.result-card,
.category-skill-card{
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
}

.interactive-card{transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition),background var(--transition);}

.result-content{min-width:0;}
.result-meta,.skill-meta{display:flex;flex-wrap:wrap;gap:.45rem;}

.pill{
  display:inline-flex;align-items:center;min-height:1.8rem;padding:.26rem .68rem;border-radius:999px;
  background:#eef4fa;color:var(--blue-deep);font-size:.82rem;font-weight:600;
}

.generate-banner{
  width:100%;
  align-items:center;
  justify-content:center;
  gap:var(--s3);
  padding:.55rem var(--s4);
  border:0;
  border-radius:0;
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 12px 28px -24px rgba(21,24,29,.8);
  margin:0;
}
.browse-generate-bar{display:none;}
body[data-view="skills"] .browse-generate-bar,
body[data-view="domains"] .browse-generate-bar,
body[data-view="domain-detail"] .browse-generate-bar,
body[data-view="category-detail"] .browse-generate-bar{
  display:flex;
}

.generate-banner-copy{display:grid;gap:.05rem;}
.generate-kicker{
  color:var(--accent);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.generate-banner strong{display:block;font-size:1rem;}
.generate-banner span{color:rgba(250,248,244,.72);}
.generate-banner .generate-kicker{color:var(--accent);}
.generate-banner .primary-button{
  min-height:2.25rem;
  padding:.55rem 1rem;
  background:var(--paper);
  color:var(--ink);
}
.generate-banner .primary-button:hover,
.generate-banner .primary-button:focus-visible{
  background:var(--accent);
  color:var(--ink);
}

.domain-grid{grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.domain-card,
.category-card{
  display:grid;gap:.5rem;padding:var(--s4);text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
}
.domain-card:hover,.domain-card:focus-visible,
.category-card:hover,.category-card:focus-visible{
  transform:translateY(-3px);border-color:var(--blue);
  background:var(--card);
  box-shadow:0 14px 30px -18px rgba(21,24,29,.4);
}

.domain-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;background:var(--paper);color:var(--blue);
}
.domain-icon svg{width:1.3rem;height:1.3rem;fill:currentColor;}

.domain-name,.category-name{font-size:1.05rem;font-weight:600;}
.domain-copy,.category-copy{font-size:.88rem;line-height:1.5;}
.category-count{color:var(--ink-soft);font-size:.78rem;font-weight:500;margin-top:var(--s2);}

.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s3);}

.empty-state{
  padding:var(--s4);
  border:1px dashed var(--line-strong);
  border-radius:12px;
  background:var(--card);
}

.loading-panel{display:grid;justify-items:center;text-align:center;}
.loading-panel h1{max-width:10ch;}

.loader{display:flex;gap:.65rem;margin-bottom:1.35rem;}
.loader span{
  width:.9rem;height:.9rem;border-radius:50%;
  animation:bounce 780ms ease-in-out infinite;
}
.loader span:nth-child(1){background:var(--blue);}
.loader span:nth-child(2){background:var(--ink);animation-delay:120ms;}
.loader span:nth-child(3){background:var(--blue);animation-delay:240ms;}

.dashboard-shell{display:grid;gap:var(--s6);}
.dashboard-hero{
  display:flex;justify-content:center;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
  text-align:center;
  padding:0;border:0;background:transparent;border-radius:0;
}
.dashboard-hero > div:first-child{display:grid;justify-items:center;}
.dashboard-owner{
  margin:0;
  color:var(--blue);
  font-family:"Newsreader",Georgia,serif;
  font-size:2.2rem;
  font-weight:600;
  line-height:1;
}
.dashboard-hero h1{margin:.7rem 0 0;}
.dashboard-hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;}
.signature{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center;}
.shape-wrap{display:grid;place-items:center;}
.bars{display:grid;gap:var(--s3);}
.bar-row .bar-top{display:flex;justify-content:space-between;align-items:baseline;}
.bar-row .name{font-weight:600;}
.bar-row .val{font-family:"Newsreader",serif;font-weight:600;color:var(--blue);}

.summary-grid{
  grid-template-columns:repeat(3,1fr);gap:var(--s4);
  padding-top:var(--s5);border-top:1px solid var(--line);
}
.stat-card,.profile-card{border:0;background:transparent;border-radius:0;padding:0;}
.stat-card span,.profile-card span{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.stat-card strong{
  display:block;
  font-family:"Newsreader",serif;font-size:2.6rem;font-weight:600;line-height:1;
  margin-top:.5rem;color:var(--blue);
}
.profile-card p{
  font-family:"Newsreader",serif;font-size:2.6rem;line-height:1;color:var(--ink);font-weight:600;margin-top:.5rem;margin-bottom:0;
}

.dashboard-grid{grid-template-columns:1fr;gap:var(--s5);}
.dashboard-section{border:0;background:transparent;padding:0;}
.dashboard-section .column-heading{margin-bottom:var(--s3);}
.stack-grid{display:flex;flex-wrap:wrap;gap:.7rem;}
.selected-skill{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.6rem 1rem .6rem .8rem;border:1px solid var(--line-strong);border-radius:99px;background:var(--card);
}
.selected-skill{
  text-align:left;
  cursor:pointer;
}
.selected-skill:hover,
.selected-skill:focus-visible{
  transform:translateY(-2px);
  border-color:var(--blue);
  box-shadow:0 12px 24px -18px rgba(21,24,29,.45);
}
.selected-skill h3{margin:0;font-size:.95rem;font-weight:600;}
.selected-skill p{display:none;}
.selected-skill .skill-meta{margin:0;}
.selected-skill .pill{
  background:var(--blue);color:var(--paper);border-radius:50%;
  width:26px;height:26px;padding:0;font-family:"Newsreader",serif;
  justify-content:center;flex:none;
}

.breakdown-row{grid-template-columns:1fr;gap:.5rem;}
.breakdown-label{font-weight:600;font-size:.98rem;}
.bar-track{height:10px;background:#eee7da;border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;background:var(--blue);border-radius:99px;}
.bar-fill.top{background:var(--ink);}
.breakdown-count{
  font-family:"Newsreader",serif;color:var(--blue);font-weight:600;padding-top:0;
}

.hard-reset-wrap{
  display:flex;justify-content:center;
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.hard-reset-button{
  background:transparent;border:0;cursor:pointer;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;
  color:var(--ink-soft);
  padding:.6rem 1rem;border-radius:10px;
  transition:color var(--transition),background var(--transition);
}
.hard-reset-button:hover,.hard-reset-button:focus-visible{
  color:#c0392b;
  background:rgba(192,57,43,.06);
}

.comparison-modes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4);
}
.comparison-mode-card{
  display:grid;
  align-content:start;
  gap:var(--s3);
  min-height:270px;
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
}
.comparison-mode-card p{
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
}
.comparison-mode-card.is-disabled{
  opacity:.62;
  background:#f4f0e8;
}
.mode-badge{
  justify-self:start;
  padding:.28rem .64rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--ink-soft);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.archetype-select{margin-top:.2rem;}
.archetype-intro-card{max-width:620px;}

.progress-track{
  width:min(100%,520px);height:12px;background:#eee7da;border-radius:99px;
  overflow:hidden;margin-top:var(--s4);
}
.progress-fill{
  height:100%;width:0;background:var(--blue);border-radius:99px;
  transition:width .25s linear;
}

.result-score-wrap{
  display:grid;
  justify-items:center;
  gap:var(--s3);
  text-align:center;
}
.result-verdict{
  margin:0;
  color:var(--ink);
  font-family:"Newsreader",serif;
  font-size:1.65rem;
  line-height:1.2;
}
.score-ring{display:block;}
.score-ring-number{
  font-family:"Newsreader",Georgia,serif;
  font-size:2.8rem;
  font-weight:600;
  fill:var(--ink);
}
.score-ring-label{
  font-family:"Inter",system-ui,sans-serif;
  font-size:.9rem;
  font-weight:600;
  fill:var(--ink-soft);
}
.result-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-top:var(--s6);}
.chip-cluster{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s3);}
.result-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border-radius:99px;
  border:1px solid var(--line-strong);font-weight:600;font-size:.92rem;
  background:var(--card);color:var(--ink);
}
.result-chip .rn{font-family:"Newsreader",serif;font-size:.85rem;}
.bucket-have{color:#1e7a46;}
.result-bucket .result-chip.have{border-color:#9bd3b0;background:#eef8f1;color:#1e7a46;}
.bucket-missing{color:#b23b2e;}
.result-bucket .result-chip.missing{border-color:#e6b3ab;background:#fbeeec;color:#b23b2e;}
.result-bucket button.result-chip.missing{
  cursor:pointer;
}
.result-bucket button.result-chip.missing:not(:disabled):hover,
.result-bucket button.result-chip.missing:not(:disabled):focus-visible{
  border-color:#b23b2e;
  background:#fff5f3;
}
.result-bucket button.result-chip.missing:disabled{
  opacity:.45;
  cursor:default;
}

.modal{
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  padding:1.5rem;
}
.modal.hidden{display:none;}
.modal-backdrop{position:absolute;inset:0;background:var(--ink);opacity:.28;}
.modal-card{
  position:relative;
  width:min(100%,780px);
  max-height:min(90vh,860px);
  overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);
}

.modal-tagline{margin-bottom:var(--s4);}

.level-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
.level-card{
  min-height:190px;padding:0;
  border:0;background:transparent;border-radius:14px;
}
.level-card:hover{transform:none;}

.choose-level-button{
  position:relative;
  overflow:hidden;
  display:grid;justify-items:start;align-content:start;text-align:left;gap:.55rem;
  width:100%;min-height:100%;
  padding:var(--s4);border:1px solid var(--line-strong);border-radius:14px;
  background:var(--card);color:var(--ink);cursor:pointer;
}
.choose-level-button:hover,.choose-level-button:focus-visible{
  transform:translateY(-3px);border-color:var(--blue);background:#f3f8fd;
}
.level-options.is-confirming .choose-level-button:not(.is-confirming){
  opacity:.38;
  transform:none;
}
.choose-level-button.is-confirming{
  border-color:#1e7a46;
  background:#eef8f1;
  color:#1e7a46;
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 18px 34px -24px rgba(30,122,70,.55);
}
.choose-level-button.is-confirming::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(238,248,241,.82);
  animation:confirmWash 620ms ease both;
}
.choose-level-button.is-confirming::after{
  content:"✓";
  position:absolute;
  top:50%;
  left:50%;
  width:3rem;
  height:3rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1e7a46;
  color:#fff;
  font-size:1.5rem;
  font-weight:700;
  transform:translate(-50%,-50%) scale(.72);
  opacity:0;
  animation:confirmPop 620ms cubic-bezier(.2,1.2,.35,1) both;
}

.level-roman{
  background:transparent;color:var(--blue);padding:0;min-width:auto;border-radius:0;
  font-family:"Newsreader",serif;font-size:1.8rem;font-weight:600;line-height:1;
}
.level-name{font-size:1.05rem;font-weight:600;}

.modal-header-actions{
  display:flex;align-items:center;gap:.5rem;flex-shrink:0;
}

.level-info-wrap{
  position:relative;
}

.info-dot{
  width:1.8rem;height:1.8rem;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--card);color:var(--blue);cursor:help;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
}
.info-dot:hover,.level-info-wrap:focus-within .info-dot{
  border-color:var(--blue);background:#eef4fa;
}

.level-descriptions-panel{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:10;
  width:340px;padding:var(--s3) var(--s4);
  border:1px solid var(--line-strong);border-radius:14px;background:var(--card);
  box-shadow:0 8px 28px -10px rgba(21,24,29,.22);
  display:grid;gap:var(--s3);
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity var(--transition),transform var(--transition);
}
.level-info-wrap:hover .level-descriptions-panel,
.level-info-wrap:focus-within .level-descriptions-panel{
  opacity:1;pointer-events:auto;transform:translateY(0);
}

.level-desc-item{display:grid;gap:.3rem;}
.level-desc-item + .level-desc-item{padding-top:var(--s3);border-top:1px solid var(--line);}
.level-desc-item strong{font-size:.88rem;color:var(--ink);}
.level-desc-item p{font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin:0;}

.ready-modal-card{max-width:520px;text-align:center;}
.ready-modal-actions{display:flex;justify-content:center;gap:.9rem;margin-top:var(--s4);}
.missing-skill-prompt-card{
  max-width:540px;
}
.missing-skill-prompt-card .modal-header{
  align-items:flex-start;
}
.missing-skill-prompt-card .modal-header > div{
  flex:1;
}
.missing-skill-prompt-name{
  margin:0;
  font-family:"Newsreader",serif;
  font-size:1.45rem;
  line-height:1.2;
  color:var(--ink);
}

.skill-detail-card{
  width:min(100%,920px);
  min-height:min(70vh,720px);
  display:grid;
  align-content:start;
}

.skill-detail-meta{
  display:grid;
  gap:var(--s3);
  margin-top:var(--s2);
}

.skill-detail-row{
  display:grid;
  gap:.45rem;
  padding:var(--s3) 0;
  border-top:1px solid var(--line);
}

.skill-detail-label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}

.skill-detail-value{
  font-family:"Newsreader",serif;
  font-size:1.55rem;
  line-height:1.2;
  color:var(--ink);
}

.hidden{display:none !important;}

/* ── Level intro overlay ── */
.level-intro-card{
  width:min(95%,900px);
  max-height:92vh;
  display:grid;
  align-content:start;
  gap:var(--s5);
  padding:var(--s5) var(--s6);
}

.level-intro-header{
  padding-bottom:var(--s4);
  border-bottom:2px solid var(--ink);
}

.level-intro-title{
  font-size:clamp(2.8rem,6vw,5rem);
  margin:0 0 var(--s2);
  text-transform:uppercase;
  letter-spacing:-.01em;
}

.level-intro-subtitle{
  color:var(--ink-soft);
  font-size:1.1rem;
  font-style:italic;
  margin:0;
}

.level-intro-levels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s4);
}

.level-intro-item{
  display:grid;
  gap:var(--s3);
  align-content:start;
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  transition:border-color var(--transition),background var(--transition);
}

.level-intro-item:hover,
.level-intro-item:focus-visible{
  border-color:var(--blue);
  background:#f3f8fd;
}

.level-intro-number{
  font-family:"Newsreader",Georgia,serif;
  font-size:2.8rem;
  font-weight:600;
  color:var(--blue);
  line-height:1;
}

.level-intro-content{display:grid;gap:.45rem;}

.level-intro-name{
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0;
}

.level-intro-desc{
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.65;
  margin:0;
}

.level-intro-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
}

.level-intro-caveat{
  color:var(--ink-soft);
  font-size:.95rem;
  font-style:italic;
  margin:0;
  max-width:44ch;
  line-height:1.5;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(-0.5rem);
    opacity: 1;
  }
}

@keyframes confirmWash {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes confirmPop {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.72);
  }

  58% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
}

@media (max-width: 860px) {
  .view {
    padding: var(--s6) var(--s3) var(--s5);
  }

  .summary-grid,
  .dashboard-grid,
  .domain-grid,
  .category-grid,
  .level-options,
  .comparison-modes,
  .result-breakdown,
  .signature {
    grid-template-columns: 1fr;
  }

  .generate-banner,
  .subpage-header,
  .dashboard-hero,
  .result-card,
  .category-skill-card,
  .modal-header,
  .ready-modal-actions,
  .level-intro-footer {
    flex-direction: column;
  }

  .topbar{align-items:flex-start;}
  .topbar-actions{max-width:100%;}

  .level-intro-card {
    padding: var(--s4);
  }

  .level-intro-levels {
    grid-template-columns: 1fr;
  }

  .level-descriptions-panel {
    width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

html { min-height: 100%; }

body {
  display: flex;
  flex-direction: column;
}

.topbar { flex: none; }

.app-shell {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 0;
}

/* Tall views top-align instead of centering, so their heading isn't pushed
   above the fold. Remove this block if you want every page centered. */
.view[data-view="domains"],
.view[data-view="domain-detail"],
.view[data-view="category-detail"],
.view[data-view="dashboard"] {
  justify-content: flex-start;
}