/* /patchnotes and /patchnote (PatchNotes.php, PatchNote.php). */

.pn-search { min-width: min(320px, 100%); }
.pn-latest { margin-bottom: 30px; }
.pn-latest__title { font-family: var(--hx-font-display); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 10px; }
.pn-latest__title a { color: var(--hx-ice); }
.pn-latest__title a:hover { color: var(--hx-gold); }
.pn-latest__summary { color: var(--hx-text-dim); max-width: 860px; font-size: 1.02rem; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 20px; }
.pn-chips .hx-badge { text-transform: none; letter-spacing: .02em; font-size: .78rem; }
.pn-chips .hx-badge:hover { background: rgba(var(--hx-teal-rgb), .2); color: var(--hx-hover-text); }

.pn-heading { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-text-dim); margin: 0 0 12px; }
.pn-list { display: grid; gap: 10px; }
.pn-item[hidden] { display: none !important; }
a.pn-item.hx-card { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; }
.pn-item__date { color: var(--hx-text-dim); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pn-item__body { min-width: 0; }
.pn-item__body b { display: block; color: var(--hx-ice); font-size: 1.02rem; }
.pn-item__body span { display: block; color: var(--hx-text-dim); font-size: .9rem; margin-top: 2px; }
.pn-item__end { display: flex; align-items: center; gap: 12px; }

/* single note */
.pn-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pn-frame { padding: 1px; }
.pn-frame > .gw-patchnotes { clip-path: var(--hx-shape); }

@media (max-width: 575.98px) {
    a.pn-item.hx-card { grid-template-columns: 1fr auto; gap: 4px 12px; }
    .pn-item__date { grid-column: 1 / -1; }
}

/* ---- the list as a notice board: the latest note is the pinned proclamation, the older ones are
   scrolls with a seal for their date */
.hx-banner .pn-search { margin-top: 16px; max-width: 420px; }
.pn-latest { position: relative; }
a.pn-item.hx-card {
    position: relative;
    padding-left: 22px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--hx-gold) 10%, transparent), transparent 40%),
        linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
}
a.pn-item.hx-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 8px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(90deg, var(--hx-gold-deep), var(--hx-gold), var(--hx-gold-deep));
    box-shadow: 2px 0 6px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k)));
}
.pn-item__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    text-align: center;
    color: var(--hx-gold);
    background: var(--hx-inset);
    border: 1px solid color-mix(in srgb, var(--hx-gold) 40%, transparent);
    clip-path: var(--hx-shape-sm);
}