/* Visual polish for the directory homepage, matching the opening overlay.
   Appearance only: no layout structure, markup or behaviour changes. Loaded last. */

/* ---------- atmosphere ---------- */
html[data-theme=dark] body{
  background:
    radial-gradient(1100px 620px at 12% -12%,rgba(59,91,255,.20),transparent 62%),
    radial-gradient(900px 560px at 100% 4%,rgba(168,85,247,.15),transparent 62%),
    radial-gradient(900px 700px at 55% 115%,rgba(34,211,238,.09),transparent 60%),
    #11141b;
  background-attachment:fixed;
}
html[data-theme=light] body{
  background:
    radial-gradient(1100px 620px at 12% -12%,rgba(57,120,237,.10),transparent 62%),
    radial-gradient(900px 560px at 100% 4%,rgba(168,85,247,.07),transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
html[data-theme=dark] .topbar{background:rgba(22,25,33,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
html[data-theme=light] .topbar{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}

/* ---------- headline + search ---------- */
html .search-zone h1{
  background:linear-gradient(100deg,var(--text) 0%,var(--text) 38%,#7aa2ff 62%,#c084fc 82%,#f0abfc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
html .search-form{
  border-color:color-mix(in srgb,var(--blue) 28%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 10%,transparent),0 18px 48px -22px rgba(76,110,245,.55);
}
html[data-theme=dark] .search-form{background:rgba(34,38,48,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html .search-form:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent),0 22px 56px -20px rgba(76,110,245,.7);
}
html .search-form button{
  background:linear-gradient(135deg,#4f7dff,#8b5cf6);font-weight:600;border-radius:9px;
  box-shadow:0 8px 20px -8px rgba(99,102,241,.75);transition:transform .2s,box-shadow .2s,filter .2s;
}
html .search-form button:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(99,102,241,.85)}

/* ---------- category shortcuts: coloured icon chips ---------- */
html .shortcut{transition:background .2s,transform .2s}
html .shortcut svg{box-sizing:content-box;padding:6px;border-radius:9px;color:var(--c,#6d8cff);background:color-mix(in srgb,var(--c,#6d8cff) 15%,transparent);opacity:1}
html .shortcut:hover svg{background:var(--c,#6d8cff);color:#fff}
html .shortcut:nth-child(1){--c:#7c8cff}html .shortcut:nth-child(2){--c:#f59e0b}html .shortcut:nth-child(3){--c:#ec4899}
html .shortcut:nth-child(4){--c:#10b981}html .shortcut:nth-child(5){--c:#3b82f6}html .shortcut:nth-child(6){--c:#8b5cf6}
html .shortcut:nth-child(7){--c:#ef4444}html .shortcut:nth-child(8){--c:#06b6d4}html .shortcut:nth-child(9){--c:#a16207}
html .shortcut:nth-child(10){--c:#0ea5e9}html .shortcut:nth-child(11){--c:#f97316}html .shortcut:nth-child(12){--c:#d946ef}

/* ---------- YS ecosystem: same vivid cards as the opening ---------- */
html .eco-card{
  position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:14px;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 16px 36px -20px var(--glow);
  transition:transform .25s,box-shadow .25s;
}
html .eco-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(100deg,transparent 20%,#000 80%);mask-image:linear-gradient(100deg,transparent 20%,#000 80%)}
html .eco-card::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-200%) skewX(-12deg);animation:ysh-sheen 8s ease-in-out infinite}
html .eco-card:nth-child(2)::after{animation-delay:-2s}html .eco-card:nth-child(3)::after{animation-delay:-4s}html .eco-card:nth-child(4)::after{animation-delay:-6s}
@keyframes ysh-sheen{0%,65%{transform:translateX(-200%) skewX(-12deg)}100%{transform:translateX(420%) skewX(-12deg)}}
html .eco-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 22px 44px -18px var(--glow)}
html .eco-card strong{color:#fff}
html .eco-card p{color:rgba(255,255,255,.72)}
html .eco-card>svg{color:#fff;opacity:.85;box-sizing:content-box;padding:6px;border-radius:50%;background:rgba(255,255,255,.14)}
html .eco-card .eco-icon{color:#fff!important;background:rgba(255,255,255,.16)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);backdrop-filter:blur(4px)}
html .eco-card:nth-child(1){--glow:#3b82f6;background:radial-gradient(90% 140% at 0% 0%,rgba(34,211,238,.65),transparent 55%),radial-gradient(80% 140% at 100% 30%,#3b5bff,transparent 65%),linear-gradient(135deg,#10226a,#0a1440)}
html .eco-card:nth-child(1)::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 10px)}
html .eco-card:nth-child(2){--glow:#d946ef;background:radial-gradient(80% 160% at 100% 0%,rgba(217,70,239,.85),transparent 60%),radial-gradient(70% 140% at 0% 100%,rgba(244,63,94,.5),transparent 60%),linear-gradient(135deg,#3a0f4f,#1a0824)}
html .eco-card:nth-child(2)::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 7px,transparent 7px 15px) 0 6px/100% 4px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 7px,transparent 7px 15px) 0 calc(100% - 6px)/100% 4px no-repeat}
html .eco-card:nth-child(3){--glow:#14b8a6;background:radial-gradient(80% 160% at 100% 0%,rgba(20,184,166,.85),transparent 60%),radial-gradient(70% 140% at 0% 100%,rgba(34,211,238,.45),transparent 60%),linear-gradient(135deg,#0a3b36,#04201d)}
html .eco-card:nth-child(3)::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 5px)}
html .eco-card:nth-child(4){--glow:#ec4899;background:radial-gradient(70% 160% at 90% 0%,rgba(236,72,153,.8),transparent 60%),radial-gradient(70% 160% at 30% 100%,rgba(168,85,247,.75),transparent 60%),linear-gradient(135deg,#25103f,#2a0a24)}
html .eco-card:nth-child(4)::before{background:radial-gradient(rgba(255,255,255,.25) 1px,transparent 1.6px) 0 0/14px 14px}
html .eco-grid{gap:12px;border:0;background:none}

/* ---------- topics, cards, quick links ---------- */
html .ops-topic,html .resource-card,html .quick-link,html .sponsor-card{transition:transform .2s,border-color .2s,box-shadow .2s}
html .ops-topic:hover,html .resource-card:hover{
  transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
  box-shadow:0 14px 32px -18px rgba(76,110,245,.6);
}
/* Topic icon chip: the icon column is widened to fit the chip, and the chip aligns with the title. */
html .ops-topic{grid-template-columns:36px 1fr auto}
html .ops-topic>svg{box-sizing:border-box;width:34px;height:34px;padding:8px;border-radius:10px;align-self:center;
  background:color-mix(in srgb,currentColor 14%,transparent)}
@media(max-width:520px){
  html .ops-topic{grid-template-columns:30px 1fr;gap:2px 10px}
  html .ops-topic>svg{width:30px;height:30px;padding:7px;border-radius:9px;align-self:start;margin-top:-4px}
}
html .resource-card .site-icon{box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
html .section-head h2,html .ops-heading h2{letter-spacing:-.3px}

@media(max-width:700px){
  html[data-theme] body{background-attachment:scroll}
  html[data-theme=dark] .search-form{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}
  html .eco-grid{gap:10px}
  html .eco-card{border-radius:12px}
  html .shortcut svg{width:14px;height:14px;padding:4px;border-radius:7px}
  html .shortcut{gap:6px}
  html .shortcut span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media(max-width:420px){
  html .shortcut svg{padding:0;background:none;width:15px;height:15px}
  html .shortcut:hover svg{background:none;color:var(--c)}
}
@media(prefers-reduced-motion:reduce){
  html .eco-card::after{animation:none;display:none}
  html .ops-topic:hover,html .resource-card:hover,html .eco-card:hover,html .search-form button:hover{transform:none}
}
@media(forced-colors:active){
  html .search-zone h1{-webkit-text-fill-color:currentColor;background:none}
  html .eco-card{background:Canvas;color:CanvasText}
}