/* Identity Bytes Labs : styles for PHP-rendered pages (new labs, library,
   tags, levels, news, 404). Builds on the tokens in guide.css. */

/* FAQ block, also used on the built-in guides */
.faq{margin:48px 0 0;}
.faq h2{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.4vw,28px);margin:0 0 14px;}
.faq details{border:1px solid var(--line);background:var(--paper);margin:0 0 10px;}
.faq summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:600;display:flex;gap:12px;align-items:flex-start;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-right:2px solid var(--acc-ink);border-bottom:2px solid var(--acc-ink);transform:rotate(-45deg);transition:transform 350ms var(--ease);}
.faq details[open] summary:before{transform:rotate(45deg);}
.faq summary:hover{background:var(--paper-2);}
.faq .faq-a{padding:0 18px 14px 38px;color:var(--ink);}
.faq .faq-a p{margin:0;}

/* Breadcrumbs inside the hero */
.bc{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.7);margin-bottom:18px;list-style:none;padding:0;}
.bc li{margin:0;display:flex;gap:8px;align-items:center;}
.bc li+li:before{content:"/";color:rgba(255,255,255,.4);}
.bc a{color:rgba(255,255,255,.75);text-decoration:none;}
.bc a:hover{color:#fff;text-decoration:underline;}
.chips-h{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.chips-h a,.chips-h span{font-size:12.5px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.28);padding:5px 11px;text-decoration:none;}
.chips-h a:hover{border-color:var(--sky);}
.chips-h b{color:var(--sky);font-weight:600;}

/* Lab article layout */
.lab-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;margin-top:44px;align-items:start;}
.toc{position:sticky;top:84px;font-size:14px;}
.toc h2{font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);}
.toc li{margin:0;}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;line-height:1.35;}
.toc li.l3 a{padding-left:28px;font-size:13.5px;}
.toc a:hover{color:var(--ink);}
.toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--sky-ink);}
.answer{padding:20px 22px;margin:0 0 30px;background:var(--sky-soft);border-left:4px solid var(--sky-ink);}
.answer b{display:block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--sky-ink);margin-bottom:6px;}
.answer p{margin:0;font-size:17px;line-height:1.6;}
.takeaways{margin:0 0 30px;padding:18px 22px;border:1px solid var(--line);}
.takeaways h2{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-family:var(--font-body);}
.takeaways ul{margin:0;}
.featured-img{margin:0 0 28px;border:1px solid var(--line);}
.featured-img img{display:block;width:100%;height:auto;}

/* Prose: content written in the admin editor */
.prose{max-width:76ch;}
.prose>*:first-child{margin-top:0;}
.prose h2{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.5vw,28px);line-height:1.25;margin:44px 0 14px;padding-left:14px;border-left:4px solid var(--mint);scroll-margin-top:80px;text-wrap:balance;}
.prose h3{font-size:19px;font-weight:600;margin:30px 0 10px;padding-left:12px;border-left:3px solid var(--violet);scroll-margin-top:80px;}
.prose h4{font-size:16.5px;font-weight:600;margin:24px 0 8px;}
.prose p,.prose li{line-height:1.75;}
.prose img{max-width:100%;height:auto;display:block;margin:20px 0;border:1px solid var(--line);}
.prose figure{margin:22px 0;}
.prose figure img{margin:0;}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:8px;}
.prose blockquote{margin:20px 0;padding:14px 20px;border-left:3px solid var(--violet);background:var(--paper-2);color:var(--ink);}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0;display:block;overflow-x:auto;}
.prose th{background:var(--night-2);color:#fff;text-align:left;padding:10px 14px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;}
.prose td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;}
.prose tbody tr:nth-child(even){background:var(--paper-2);}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0;}
.prose a{color:var(--violet-ink);}
.prose svg{max-width:100%;height:auto;}
.prose details{border:1px solid var(--line);margin:14px 0;}
.prose summary{cursor:pointer;padding:12px 16px;background:var(--paper-2);font-weight:600;}
.prose details>*:not(summary){margin-left:16px;margin-right:16px;}
.prose .callout{margin:20px 0;}
.prose .step{border:1px solid var(--line);border-left:4px solid var(--violet);padding:4px 22px 18px;margin:22px 0;}

.lab-tags{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0;padding-top:20px;border-top:1px solid var(--line);align-items:center;}
.lab-tags b{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-right:4px;}
.tagpill{display:inline-block;font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--violet-soft);color:var(--violet-ink);text-decoration:none;}
.tagpill:hover{background:var(--violet);color:#fff;}
.author{display:flex;gap:16px;align-items:center;margin-top:28px;padding:18px 20px;background:var(--paper-2);border:1px solid var(--line);}
.author .av{width:48px;height:48px;border-radius:50%;background:var(--night-2);color:var(--mint);display:grid;place-items:center;font-family:var(--font-display);font-size:16px;flex:0 0 auto;}
.author p{margin:0;font-size:14.5px;}
.author a{font-weight:600;}

/* Cards used by library, tag, level and related */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 18px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:box-shadow 500ms var(--ease),transform 350ms var(--ease);}
.card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c,var(--violet));}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.card .k{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.card .t{font-family:var(--font-display);font-size:17px;line-height:1.3;}
.card .d{font-size:14.5px;color:var(--muted);flex:1;}
.card .m{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;padding-top:10px;border-top:1px solid var(--line);}
.lvlb{font-weight:600;padding:2px 8px;font-size:12px;}
.lvlb.beginner{background:var(--mint-soft);color:var(--mint-ink);}
.lvlb.intermediate{background:var(--sky-soft);color:var(--sky-ink);}
.lvlb.advanced{background:var(--amber-soft);color:var(--amber-ink);}
.card .new{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--mint);color:var(--night);padding:2px 7px;}
.related{margin-top:56px;}
.related h2{font-family:var(--font-display);font-weight:400;font-size:22px;margin:0 0 16px;}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink);background:var(--paper);cursor:pointer;font-family:inherit;}
.fchip:hover{border-color:var(--ink);}
.fchip[aria-pressed="true"],.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.fchip small{opacity:.7;font-variant-numeric:tabular-nums;}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:0 14px;max-width:460px;margin-bottom:16px;}
.search input{all:unset;flex:1;padding:11px 0;font-size:15px;}
.search:focus-within{border-color:var(--violet);}
.count{font-size:13px;color:var(--muted);margin:0 0 18px;}
.intro-box{max-width:74ch;margin:40px 0 28px;}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;}

/* News */
.news-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);}
.news-list li{margin:0;padding:18px 22px;border-top:1px solid var(--line);display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;}
.news-list li:first-child{border-top:0;}
.news-list li.pinned{background:var(--amber-soft);}
.news-list .src{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
.news-list .src time{display:block;font-weight:500;text-transform:none;letter-spacing:0;margin-top:4px;font-variant-numeric:tabular-nums;}
.news-list h2{margin:0 0 6px;font-size:16.5px;font-weight:600;line-height:1.4;font-family:var(--font-body);}
.news-list h2 a{color:var(--ink);text-decoration:none;}
.news-list h2 a:hover{color:var(--violet-ink);text-decoration:underline;}
.news-list p{margin:0;font-size:14.5px;color:var(--muted);}
.news-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px;font-size:13.5px;color:var(--muted);}
.news-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;background:var(--night-2);color:#fff;padding:12px 18px;box-shadow:var(--shadow);font-size:14px;display:flex;gap:14px;align-items:center;}
.news-toast[hidden]{display:none;}
.news-toast button{all:unset;cursor:pointer;color:var(--mint);font-weight:600;}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:22px;}
.pagination a,.pagination span{padding:8px 14px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px;}
.pagination span{background:var(--ink);color:#fff;border-color:var(--ink);}

@media(max-width:980px){
  .lab-layout{grid-template-columns:minmax(0,1fr);gap:20px;}
  .toc{position:static;border:1px solid var(--line);padding:16px;}
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .cards{grid-template-columns:1fr;}
  .news-list li{grid-template-columns:1fr;gap:6px;}
}
.prose svg:not([width]){max-height:520px;}