/* da-updates.css — the Game Development Updates pop-out (da-updates.js), on the splash and every command-centre page (2026-10-28).
   Its own tokens, so it looks the same under da.css (the splash) and dac.css (the command centre): the Gunmetal palette, the
   splash's faces, a 4px spacing grid. No raw value below the token block. Chrome is solid; the red is a fill with white text, and
   red as text only at large sizes. Group spacing is at least twice the spacing inside a group. */
.dau{
  --dau-ground:#0A0B0C; --dau-s1:#121417; --dau-s2:#181B1F; --dau-s3:#1F2328;
  --dau-line:#2B3036; --dau-line-2:#3A4048;
  --dau-strong:#E6E9EC; --dau-text:#B4BBC2; --dau-dim:#858D96;
  --dau-red:#C1121F; --dau-red-text:#E5383F; --dau-on-red:#FFFFFF; --dau-scrim:rgba(5,6,6,.82);
  --dau-1:4px; --dau-2:8px; --dau-3:12px; --dau-4:16px; --dau-5:20px; --dau-6:24px; --dau-8:32px;
  --dau-r:6px; --dau-r-sm:4px;
  --dau-fs-micro:11px; --dau-fs-small:13px; --dau-fs-body:15px; --dau-fs-h3:20px; --dau-fs-h2:26px; --dau-fs-h1:30px;
  --dau-display:"Saira Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --dau-sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --dau-w:760px; --dau-measure:68ch;
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:var(--dau-4); background:var(--dau-scrim); font-family:var(--dau-sans); color:var(--dau-text);
}
.dau[hidden]{display:none}
html.dau-open{overflow:hidden}
.dau__box{display:flex; flex-direction:column; width:100%; max-width:var(--dau-w); max-height:calc(100vh - 2 * var(--dau-4));
  background:var(--dau-ground); border:1px solid var(--dau-line-2); border-top:3px solid var(--dau-red); border-radius:var(--dau-r)}
.dau__head{display:flex; align-items:center; justify-content:space-between; gap:var(--dau-3);
  padding:var(--dau-4) var(--dau-5); border-bottom:1px solid var(--dau-line)}
.dau__title{margin:0; font-family:var(--dau-display); font-size:var(--dau-fs-h2); font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--dau-strong); line-height:1.1}
.dau__body{overflow-y:auto; padding:var(--dau-5)}
.dau__btn,.dau__back{font:inherit; font-size:var(--dau-fs-small); font-weight:600; color:var(--dau-strong); background:var(--dau-s2);
  border:1px solid var(--dau-line-2); border-radius:var(--dau-r-sm); padding:var(--dau-2) var(--dau-3); cursor:pointer}
.dau__btn:hover,.dau__back:hover{background:var(--dau-s3)}
.dau button:focus-visible{outline:2px solid var(--dau-red-text); outline-offset:2px}
.dau__lead{margin:0 0 var(--dau-5); font-size:var(--dau-fs-small); color:var(--dau-dim); max-width:var(--dau-measure)}

/* the list: one bordered row per version */
.dau__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--dau-3)}
.dau__row{display:flex; flex-direction:column; gap:var(--dau-1); width:100%; text-align:left; font:inherit; color:inherit;
  background:var(--dau-s1); border:1px solid var(--dau-line); border-left:3px solid var(--dau-line-2); border-radius:var(--dau-r-sm);
  padding:var(--dau-3) var(--dau-4); cursor:pointer}
.dau__row:hover{background:var(--dau-s2); border-left-color:var(--dau-red)}
.dau__rowtop{display:flex; align-items:center; flex-wrap:wrap; gap:var(--dau-2)}
.dau__ver{font-family:var(--dau-display); font-size:var(--dau-fs-body); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--dau-strong)}
.dau__latest{font-size:var(--dau-fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dau-on-red);
  background:var(--dau-red); border-radius:var(--dau-r-sm); padding:0 var(--dau-2); line-height:1.7}
.dau__when{margin-left:auto; font-size:var(--dau-fs-small); color:var(--dau-dim)}
.dau__rowtitle{font-family:var(--dau-display); font-size:var(--dau-fs-h3); font-weight:700; color:var(--dau-strong); line-height:1.2}
.dau__rowsum{font-size:var(--dau-fs-small); color:var(--dau-text); max-width:var(--dau-measure); line-height:1.5}

/* the article */
.dau__article{margin-top:var(--dau-5)}
.dau__meta{display:flex; align-items:center; gap:var(--dau-3); margin:0}
.dau__meta .dau__when{margin-left:0}
.dau__h{margin:var(--dau-2) 0 0; font-family:var(--dau-display); font-size:var(--dau-fs-h1); font-weight:700; color:var(--dau-strong); line-height:1.15}
.dau__summary{margin:var(--dau-3) 0 0; font-size:var(--dau-fs-body); line-height:1.6; color:var(--dau-text); max-width:var(--dau-measure)}
.dau__sec{margin-top:var(--dau-6); padding-top:var(--dau-4); border-top:1px solid var(--dau-line)}
.dau__sectitle{margin:0 0 var(--dau-2); font-size:var(--dau-fs-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dau-dim)}
.dau__items{margin:0; padding-left:var(--dau-5); display:flex; flex-direction:column; gap:var(--dau-2); font-size:var(--dau-fs-body); line-height:1.5; color:var(--dau-text); max-width:var(--dau-measure)}
.dau__items li::marker{color:var(--dau-red-text)}
.dau__state{display:flex; flex-direction:column; align-items:flex-start; gap:var(--dau-3)}
.dau__state-text{margin:0; color:var(--dau-dim)}

@media (max-width:560px){
  .dau{padding:var(--dau-2)}
  .dau__body{padding:var(--dau-4)}
  .dau__title{font-size:var(--dau-fs-h3)}
  .dau__h{font-size:var(--dau-fs-h2)}
  .dau__when{margin-left:0; flex-basis:100%}
}