/* Redesign extras: code copy bar, learning-path progress, "what's new", print.
   Own file (redesign.css is served immutable for 30 days); versioned by filemtime. */

/* ---- Code blocks: language label + copy button ---- */
/* flow-root: do not wrap around a floated drop cap, like the bare <pre> (overflow:hidden) did. */
.yawc-codewrap{position:relative;display:flow-root;margin:2em 0;width:calc(100% + 80px);margin-left:-40px}
.yawc-codewrap pre{margin:0;width:100%}
.yawc-codebar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 18px;background:var(--ink);border-bottom:1px solid #F2EDE322;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-deep);
}
.yawc-codebar__copy{
  background:transparent;border:1px solid var(--paper-deep);color:var(--paper-deep);
  font:inherit;padding:4px 10px;cursor:pointer;transition:border-color .2s,color .2s;
}
.yawc-codebar__copy:hover,.yawc-codebar__copy:focus-visible{border-color:var(--ochre);color:var(--ochre)}
.yawc-codebar__copy.is-done{border-color:#9BC4C9;color:#9BC4C9}
@media (max-width:1100px){.yawc-codewrap{width:100%;margin-left:0}}

/* ---- Learning path progress ---- */
.yawc-lp__count{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;
  color:var(--ink-3);margin:0 0 10px;
}
.yawc-lp__check{accent-color:var(--rouge);margin:0 8px 0 0;vertical-align:middle;cursor:pointer}
/* The TOC links are blocks: keep the checkbox and its link on one line. */
.toc__list > li > .yawc-lp__check + a{display:inline-block;vertical-align:middle;max-width:calc(100% - 28px)}
.toc__list > li.is-done > a{text-decoration:line-through;color:var(--ink-3)}

/* ---- Print button (cheatsheets) ---- */
.yawc-print-btn{
  justify-self:start;margin-top:14px;background:transparent;border:1px solid var(--ink);color:var(--ink);
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 14px;cursor:pointer;transition:background .2s,color .2s;
}
.yawc-print-btn:hover,.yawc-print-btn:focus-visible{background:var(--ink);color:var(--paper)}

/* ---- What's new list ---- */
.yawc-whatsnew{list-style:none;margin:0;padding:0}
.yawc-whatsnew li{display:grid;grid-template-columns:7.5em 1fr;gap:6px 18px;padding:14px 0;border-bottom:1px solid var(--hair)}
.yawc-whatsnew time{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-3)}
.yawc-whatsnew__type{display:inline-block;white-space:nowrap;hyphens:none;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge);margin-left:8px}
.yawc-whatsnew__feeds{margin-top:22px;font-family:"JetBrains Mono",monospace;font-size:12px}
@media (max-width:600px){.yawc-whatsnew li{grid-template-columns:1fr}}

/* ---- Homelab history charts ---- */
.yawc-hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:1.5em 0}
.yawc-hist figure{margin:0;border:1px solid var(--rule);padding:12px;background:var(--paper-2)}
.yawc-hist figcaption{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.yawc-hist img{display:block;width:100%;height:auto}

/* ---- Tablet / narrow-laptop topbar ----
   The 3-column topbar (brand | nav | lockup) overflows below ~1190px: from ~940px down the
   search button ends up to 174px off-screen, and from ~1190px down the lockup/status block
   is cut off (up to 184px at 1000px) while links wrap. Use two rows up to 1240px instead:
   brand + lockup, then the nav at full width, allowed to wrap. Phones keep redesign.css rules. */
@media (min-width:681px) and (max-width:1240px){
  .topbar__inner{grid-template-columns:1fr auto;grid-template-areas:"brand systems" "nav nav";gap:6px 24px}
  .topbar .brand{grid-area:brand}
  .topbar .systems{grid-area:systems}
  .topbar .nav{grid-area:nav;flex-wrap:wrap;justify-content:center;gap:6px 24px}
}

/* ---- Small phones: grids whose fixed gaps / min-content tracks exceeded the viewport ----
   .index is 12 x 1fr with a 32px gap: the 11 gaps alone are 352px, so below ~392px of viewport every
   article / cheatsheet / prompt row was wider than the screen and lost its right edge (a 360px phone,
   a very common Android width, lost 12px of every title; 320px lost 52px). The hero grid and its
   3-column meta strip fall into the same min-content trap at 320px. */
@media (max-width:680px){
  .index{grid-template-columns:minmax(0,1fr);gap:0}
  .index__item{grid-column:1/-1;min-width:0}
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__grid > *{min-width:0}
}
@media (max-width:400px){
  .hero__title{font-size:clamp(44px,16vw,64px);overflow-wrap:anywhere}
  .hero__meta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__meta-cell{padding-right:6px}
  .hero__meta-cell:nth-child(2),.hero__meta-cell:last-child{padding-left:8px}
  .hero__meta-lbl{letter-spacing:.08em;font-size:9px}
}

/* ---- Language switcher on articles ---- */
.yawc-langswitch{font-family:"JetBrains Mono",monospace;font-size:12px}

/* ---- Print: clean reading sheet, no chrome ---- */
@media print{
  :root{--paper:#fff}
  html,body{background:#fff !important;color:#000 !important;overflow:visible}
  .topbar,.dateline,.toc,.yawc-search-trigger,.related,.news,.colophon,.endmark,
  #redesign-top-btn,.yawc-print-btn,.yawc-codebar__copy,.article-hero,.sidenotes,
  .fab-menu,.scroll-progress,#yawc-rd-progress,.yawc-lp__check,.article-nav{display:none !important}
  .reading__layout,.reading .container,.container{display:block !important;max-width:none !important;padding:0 !important;margin:0 !important}
  .prose{max-width:none !important;width:100% !important;font-size:11pt;line-height:1.45}
  .prose pre,.yawc-codewrap,.codeblock{width:100% !important;margin-left:0 !important;background:#fff !important;color:#000 !important;border:1px solid #999;break-inside:avoid}
  .prose pre code,.codeblock pre code{color:#000 !important}
  .prose pre::after,.codeblock pre::after{display:none}
  .yawc-codebar{background:#eee;color:#000;border-bottom:1px solid #999}
  .prose h2,.prose h3{break-after:avoid}
  .prose table,.prose figure,.prose blockquote{break-inside:avoid}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  .prose a[href^="#"]::after{content:""}
  @page{margin:16mm}
}