/* =========================================================
   Patch Notes (patchnotes.html) and the home page's "Latest Patch" box. Uses site.css tokens.
   ========================================================= */
.pn-box{padding-bottom:20px}
.pn-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 2px;border-radius:999px;font:700 .64rem/1.2 var(--web);text-transform:uppercase;letter-spacing:.3px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 35%,#fff)}
.pn-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.pn-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.pn-count{font:.72rem var(--web);color:var(--muted);margin-left:2px}
.pn-ver{display:inline-block;padding:2px 8px 1px;border-radius:5px;background:#eef3fb;border:1px solid #d4e0f2;color:var(--blue-d);font:700 .68rem/1.4 var(--web);letter-spacing:.2px;white-space:nowrap}
.pn-draft{display:inline-block;margin-right:8px;padding:2px 8px 1px;border-radius:5px;background:#fff3d6;border:1px solid #f0cd7a;color:#8a5a00;font:700 .66rem/1.4 var(--web);text-transform:uppercase;vertical-align:3px}

/* the list: one card per update */
.pn-card{display:grid;grid-template-columns:120px minmax(0,1fr) 20px;gap:16px;align-items:center;padding:16px 14px;border-top:1px solid #ece6da;transition:background .15s}
.pn-card:first-child{border-top:0}
.pn-card:hover{background:#f7faff}
.pn-card:hover h3{color:var(--blue)}
.pn-card.first{background:linear-gradient(90deg,#fff8e8,#fff 70%);border-radius:10px;border:1px solid #f1dfb5;margin-bottom:6px}
.pn-card.draft{opacity:.85;background:repeating-linear-gradient(135deg,#fff,#fff 12px,#fffaf0 12px,#fffaf0 24px)}
.pn-when{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pn-when b{font:700 .82rem/1.2 var(--web);color:#4a4f5a}
.pn-what h3{font:700 1.02rem/1.35 var(--body);color:#2b2f38}
.pn-what p{margin-top:4px;font:.84rem/1.55 var(--body);color:#5a606b}
.pn-go{font:700 1.6rem/1 var(--body);color:#c3cbd8}
.pn-card:hover .pn-go{color:var(--blue)}

/* one note, laid out like the official patch notes */
.pn-note{max-width:780px}
.pn-back{display:inline-block;font:700 .78rem var(--web);color:var(--blue);margin-bottom:12px}
.pn-back:hover{text-decoration:underline}
.pn-head{padding-bottom:16px;border-bottom:2px solid #ece6da}
.pn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:.78rem var(--web);color:var(--muted)}
.pn-rel{padding:2px 8px 1px;border-radius:5px;background:#f4f2ec;border:1px solid #e3ddcf;font:.66rem/1.4 var(--web);color:#6e6658}
.pn-head h2{margin-top:10px;font:700 clamp(1.3rem,2.6vw,1.7rem)/1.2 var(--display);color:var(--navy)}
.pn-sum{margin-top:8px;font:.92rem/1.6 var(--body);color:#4a4f5a}
.pn-body{margin-top:6px}
.pn-sec{margin-top:20px}
.pn-sec h3{display:flex;align-items:center;gap:8px;padding:7px 12px 6px;border-radius:8px;background:linear-gradient(#f4f8ff,#e9f1fd);border:1px solid #d7e3f5;font:700 .98rem/1.2 var(--display);color:var(--blue-d)}
.pn-sec h3 img{width:24px;height:24px;object-fit:contain}
.pn-sec.known h3{background:linear-gradient(#fbfaf6,#f2efe6);border-color:#e3ddcf;color:#6e6658}
.pn-sec>ul{margin:10px 0 0;padding-left:30px;font:.9rem/1.65 var(--body);color:#3e434d}
.pn-sec li+li{margin-top:5px}
.pn-sec li::marker{color:var(--blue)}
.pn-sec ul ul{margin-top:4px;padding-left:20px;font-size:.86rem;color:#555b66}
.pn-sec ul ul li::marker{color:#9aa6b8}
.pn-sec b{color:#22262e}
.pn-foot{margin-top:22px;padding:10px 12px;border-radius:8px;background:#f8f6f0;font:.8rem var(--web);color:#6e6658}
.pn-foot a{color:var(--blue);text-decoration:underline}
.pn-nav{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.pn-nav a{display:flex;flex-direction:column;gap:3px;max-width:48%;padding:10px 12px;border:1px solid #e3ddcf;border-radius:8px;font:700 .82rem/1.35 var(--body);color:#3a3f48}
.pn-nav a:hover{border-color:var(--blue);color:var(--blue)}
.pn-nav a.nx{text-align:right;margin-left:auto}
.pn-nav small{font:.7rem var(--web);color:var(--muted)}

/* GM tools */
.pn-staff{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;padding:10px 14px;border-radius:10px;background:#2b2f38;color:#fff;font:.8rem var(--web)}
.pn-staff .check{color:#e8ecf3}
.pn-staff .gloss{margin-left:auto}
.pn-admin{margin-top:22px;padding:14px;border:1px dashed #b8c4d6;border-radius:10px;background:#f7f9fc}
.pn-abar{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font:.78rem var(--web);color:#5a606b}
.pn-abar b{color:#2b2f38}
.pn-abtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pn-src{margin-top:12px;font:.76rem var(--web)}
.pn-src summary{cursor:pointer;color:var(--blue)}
.pn-src pre{margin-top:8px;max-height:320px;overflow:auto;padding:10px;border-radius:6px;background:#fff;border:1px solid #dde3ec;font:.72rem/1.45 Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.pn-form textarea{min-height:260px;font:.86rem/1.5 Consolas,monospace}
.pn-err{color:#d33b2f;font:700 .78rem var(--web);min-height:1em}

/* home: the newest patch */
.pn-tz{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:12px;border-radius:10px;border:1px solid #f1dfb5;background:linear-gradient(90deg,#fff8e8,#fff 70%)}
.pn-tz:hover h3{color:var(--blue)}
.pn-tz ul{margin-top:6px;padding-left:18px;font:.8rem/1.55 var(--body);color:#4a4f5a}
.pn-tz .pn-count{color:var(--blue)}

@media (max-width:620px){
  .pn-card{grid-template-columns:minmax(0,1fr) 16px;gap:8px;padding:14px 10px}
  .pn-card .pn-when{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px}
  .pn-card .pn-what{grid-column:1}
  .pn-tz{grid-template-columns:1fr;gap:8px}
  .pn-tz .pn-when{flex-direction:row;align-items:center;gap:8px}
  .pn-sec>ul{padding-left:22px;font-size:.88rem}
  .pn-nav{flex-direction:column}
  .pn-nav a{max-width:none}
  .pn-nav a.nx{text-align:left;margin-left:0}
  .pn-staff .gloss{margin-left:0}
}