/* ASR Tutorials · visual hierarchy v17
   Premium dark grid, restrained semantic colour, obvious section/folder/tutorial/resource hierarchy. */

body[data-tutorial-final]{
  --tv17-bg:#050607;
  --tv17-panel:#090b0d;
  --tv17-panel-2:#0d1013;
  --tv17-border:#272c32;
  --tv17-text:#f5f7f8;
  --tv17-muted:#929aa3;
}

body[data-tutorial-final] .tp-library{
  border-color:#282d33!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#060708 0%,#050607 100%)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.28)!important;
}
body[data-tutorial-final] .tp-library-rail{
  position:relative;
  background:linear-gradient(180deg,#080a0c 0%,#060708 100%)!important;
}
@media(min-width:761px){
  body[data-tutorial-final] .tp-library-rail{
    position:sticky;
    top:84px;
    align-self:start;
    max-height:calc(100vh - 104px);
    overflow:auto;
  }
}
body[data-tutorial-final] .tp-library-main{background:radial-gradient(circle at 86% 0%,rgba(255,255,255,.025),transparent 28%),#060708!important}

body[data-tutorial-final] .tp-grid-group{margin-top:24px}
body[data-tutorial-final] .tp-grid-group:first-child{margin-top:18px}
body[data-tutorial-final] .tp-grid-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  padding:0 2px 9px;
  border-bottom:1px solid #242a30;
}
body[data-tutorial-final] .tp-grid-label span{
  color:#c8cdd2;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body[data-tutorial-final] .tp-grid-label b{
  display:grid;
  place-items:center;
  min-width:25px;
  height:25px;
  padding:0 7px;
  border:1px solid #343a41;
  border-radius:999px;
  background:#0c0f12;
  color:#aeb5bc;
  font-size:10px;
}

/* Collection / folder grid */
body[data-tutorial-final] .tp-folder-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:0!important;
}
body[data-tutorial-final] .tp-folder-card{
  --tile-accent:#aeb5bd;
  --tile-bg:#0d0f12;
  --tile-border:#30363d;
  grid-template-columns:42px minmax(0,1fr)!important;
  min-height:188px!important;
  padding:18px!important;
  border-color:var(--tile-border)!important;
  border-radius:13px!important;
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--tile-accent) 10%,transparent),transparent 42%),
    var(--tile-bg)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
body[data-tutorial-final] .tp-folder-card:nth-child(6n+1){--tile-accent:#80b7da;--tile-bg:#091218;--tile-border:#294457}
body[data-tutorial-final] .tp-folder-card:nth-child(6n+2){--tile-accent:#7bc39b;--tile-bg:#09120e;--tile-border:#294638}
body[data-tutorial-final] .tp-folder-card:nth-child(6n+3){--tile-accent:#d6ad68;--tile-bg:#151108;--tile-border:#4b3a1f}
body[data-tutorial-final] .tp-folder-card:nth-child(6n+4){--tile-accent:#cf8f99;--tile-bg:#140c0f;--tile-border:#4a2930}
body[data-tutorial-final] .tp-folder-card:nth-child(6n+5){--tile-accent:#98a9dc;--tile-bg:#0b0f18;--tile-border:#303a58}
body[data-tutorial-final] .tp-folder-card:nth-child(6n+6){--tile-accent:#afb6bd;--tile-bg:#0f1113;--tile-border:#373c42}
body[data-tutorial-final] .tp-folder-card:before{
  width:3px!important;
  background:var(--tile-accent)!important;
}
body[data-tutorial-final] .tp-folder-card:hover{
  transform:translateY(-3px)!important;
  border-color:var(--tile-accent)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.25)!important;
}
body[data-tutorial-final] .tp-folder-icon{
  width:38px!important;
  height:38px!important;
  border-color:color-mix(in srgb,var(--tile-accent) 44%,#2f3439)!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--tile-accent) 9%,#0c0e10)!important;
  color:var(--tile-accent)!important;
}
body[data-tutorial-final] .tp-folder-copy{display:flex;flex-direction:column;min-width:0}
body[data-tutorial-final] .tp-folder-copy>span{color:var(--tile-accent)!important}
body[data-tutorial-final] .tp-folder-copy h3{margin-top:9px!important;font-size:17px!important}
body[data-tutorial-final] .tp-folder-copy p{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
body[data-tutorial-final] .tp-folder-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
body[data-tutorial-final] .tp-folder-stats em{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 7px;
  border:1px solid color-mix(in srgb,var(--tile-accent) 28%,#31363c);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#aeb4ba;
  font-size:9px;
  font-style:normal;
  font-weight:720;
}
body[data-tutorial-final] .tp-folder-card>b{color:var(--tile-accent)!important}

/* Tutorial grid */
body[data-tutorial-final] .tp-results{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:0!important;
}
body[data-tutorial-final] .tp-row-card{
  --tile-accent:#b6bdc4;
  --tile-bg:#0c0e10;
  --tile-border:#30353b;
  min-height:268px!important;
  padding:19px!important;
  border-color:var(--tile-border)!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--tile-accent) 11%,transparent),transparent 38%),
    linear-gradient(180deg,var(--tile-bg),#08090a 78%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
body[data-tutorial-final] .tp-row-card[data-semantic-resource-type="video"]{--tile-accent:#76aee1;--tile-bg:#0a1118;--tile-border:#29405a}
body[data-tutorial-final] .tp-row-card[data-semantic-resource-type="slides"]{--tile-accent:#e09b64;--tile-bg:#15100c;--tile-border:#4d3221}
body[data-tutorial-final] .tp-row-card[data-semantic-resource-type="code"]{--tile-accent:#72c2d4;--tile-bg:#091316;--tile-border:#264650}
body[data-tutorial-final] .tp-row-card[data-semantic-resource-type="notebook"]{--tile-accent:#d7ae6b;--tile-bg:#151109;--tile-border:#4b3a20}
body[data-tutorial-final] .tp-row-card[data-semantic-resource-type="spreadsheet"]{--tile-accent:#77c295;--tile-bg:#09120e;--tile-border:#294638}
body[data-tutorial-final] .tp-row-card[data-semantic-resource-type="guide"]{--tile-accent:#b5bcc3;--tile-bg:#0d0f11;--tile-border:#34393f}
body[data-tutorial-final] .tp-row-card:hover{
  transform:translateY(-3px)!important;
  border-color:var(--tile-accent)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.27)!important;
}
body[data-tutorial-final] .tp-card-accent{height:3px!important;background:linear-gradient(90deg,var(--tile-accent),transparent)!important}
body[data-tutorial-final] .tp-card-topline{display:flex;align-items:center;gap:9px}
body[data-tutorial-final] .tp-resource-type-icon{
  display:grid;
  place-items:center;
  min-width:31px;
  height:31px;
  padding:0 6px;
  border:1px solid color-mix(in srgb,var(--tile-accent) 42%,#343940);
  border-radius:8px;
  background:color-mix(in srgb,var(--tile-accent) 8%,#0b0d0f);
  color:var(--tile-accent)!important;
  font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body[data-tutorial-final] .tp-row-kicker{color:var(--tile-accent)!important}
body[data-tutorial-final] .tp-row-card h3{margin-top:13px!important;font-size:18.5px!important}
body[data-tutorial-final] .tp-row-card>div p{color:#a2a9b0!important}
body[data-tutorial-final] .tp-row-open{
  border-color:color-mix(in srgb,var(--tile-accent) 35%,#343a40)!important;
  background:color-mix(in srgb,var(--tile-accent) 7%,#0d0f12)!important;
}
body[data-tutorial-final] .tp-row-open:hover{
  border-color:var(--tile-accent)!important;
  background:var(--tile-accent)!important;
  color:#070809!important;
}

/* Resource chips use the same semantic language everywhere. */
body[data-tutorial-final] .tp-row-resources{align-items:flex-start!important}
body[data-tutorial-final] .tp-resource-chip{
  gap:5px;
  min-height:25px!important;
  border-radius:7px!important;
  font-size:9.5px!important;
}
body[data-tutorial-final] .tp-resource-chip i{font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal}
body[data-tutorial-final] .tp-resource-chip[data-resource-kind="video"]{color:#a9d1f5;border-color:#2c4d69;background:#0a151f}
body[data-tutorial-final] .tp-resource-chip[data-resource-kind="slides"]{color:#efbb91;border-color:#5a3824;background:#181008}
body[data-tutorial-final] .tp-resource-chip[data-resource-kind="code"]{color:#9edbe8;border-color:#2a5058;background:#08161a}
body[data-tutorial-final] .tp-resource-chip[data-resource-kind="notebook"]{color:#e2c28c;border-color:#584522;background:#18130a}
body[data-tutorial-final] .tp-resource-chip[data-resource-kind="spreadsheet"]{color:#9bd4af;border-color:#2c503b;background:#0a1510}
body[data-tutorial-final] .tp-resource-chip[data-resource-kind="guide"]{color:#c7ccd1;border-color:#3a4046;background:#101214}

/* Viewer resource cards inherit compact semantic surfaces. */
body[data-tutorial-final] .tp-resource-grid{gap:10px!important}
body[data-tutorial-final] .tp-resource{
  min-height:74px;
  border-radius:10px!important;
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
body[data-tutorial-final] .tp-resource:hover{transform:translateY(-1px)}

/* Tree: active section feels selected without a loud fill. */
body[data-tutorial-final] .tp-tree-link{border-radius:8px!important}
body[data-tutorial-final] .tp-tree-link.active{
  border-color:#46515b!important;
  background:#101419!important;
  box-shadow:inset 3px 0 0 #d9dee3!important;
}
body[data-tutorial-final] .tp-tree-link.active .tp-tree-kind{color:#eef1f3!important}

@media(max-width:1120px){
  body[data-tutorial-final] .tp-folder-grid,
  body[data-tutorial-final] .tp-results{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  body[data-tutorial-final] .tp-library{border-radius:0!important}
  body[data-tutorial-final] .tp-folder-grid,
  body[data-tutorial-final] .tp-results{grid-template-columns:1fr!important}
  body[data-tutorial-final] .tp-folder-card,
  body[data-tutorial-final] .tp-row-card{min-height:auto!important}
}