/* ────────────────────────── Latest updates ──────────────────────────
   The "Latest updates" posts, shared by the two pages that show them: the home page
   section (status.php) and the public archive at /updates (updates.php).

   Lifted out of status.css when the archive arrived - the archive wants the cards and
   none of the league tables, and one copy of the rules beats two that drift apart.
   The reaction styles live here too, even though only the home page paints any: they
   belong to the post, and the archive simply has no slots for them to land in. */

.LatestUpdates {
    padding: 18px 18px;
}

/* ────────────────── A dev update post ──────────────────
   Three shapes off one block, picked by the `kind` and `pin` fields in updates.json:

     .DevUpdate--pinned    one strip at the top. The season-opener lives here - first on the
                           page, as Max wants, but two lines rather than fifteen.
     .DevUpdate--feature   a card. The body is a <details> the reader opens.
     .DevUpdate--note      a dense row for housekeeping, no card behind it.

   Shut, a post is its title, its date and its reaction pills. That is the whole point of the
   layout: the section stays about a screen tall however many posts are in it. */

.DevUpdate__List {
    color: var(--grey900);
}
.DevUpdate {
    color: var(--grey900);
    background-color: var(--grey100);
    padding: 4px 16px 12px;
    margin-bottom: 12px;
}

/* The lid. Generous vertical padding because the whole strip is the tap target and it is
   being tapped with a thumb - the title alone would be a 20px one on a note. */
.DevUpdate__Summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none; /* Firefox's default triangle. */
}
.DevUpdate__Summary::-webkit-details-marker {
    display: none;
}
.DevUpdate__Summary:focus-visible {
    outline: 2px solid var(--teal600);
    outline-offset: 2px;
}
.DevUpdate__Head {
    flex: 1;
    min-width: 0;
}

/* Deliberately not h2 size. These titles run to 90-odd characters because they are written as
   the summary of the post - at heading size that is six wrapped lines on a phone, which is the
   wall this layout exists to get rid of. At 17px the longest of them takes three. */
.DevUpdate__Title {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}
@media (min-width: 43.75em) {
    .DevUpdate__Title { font-size: 19px; }
}

/* The chevron, drawn rather than an <i> so it can be rotated. Two borders on a rotated square
   is the trick; ::after so the date stays the last thing in the flex row. */
.DevUpdate__Summary::after {
    content: "";
    flex: none;
    align-self: center;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 2px solid var(--grey500);
    border-bottom: 2px solid var(--grey500);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
}
.DevUpdate__Post[open] > .DevUpdate__Summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.DevUpdate__Body {
    padding-bottom: 4px;
}
.DevUpdate__Body p {
    color: var(--grey700);
    margin-top: 0;
}
.DevUpdate__Body img {
    max-width: 100%;
    margin: 12px 0px;
    box-shadow: 0 1px 3px 0 var(--shadow);
    font-family: sans-serif;
    display: block;
}
.DevUpdate__Body > ul > li {
    padding: 4px 0;
}
.DevUpdate .newspaper_update {
    /* font-family: 'Times New Roman', Times, serif; */
    font-size: 24px;
    text-transform: uppercase;
}
.DevUpdate a.btn_1 {
    max-width: 320px;
    margin: 8px auto;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}
/* Under the title, not beside it: a nowrap date in the same row costs the title a third of
   the width, and the title is what is being read. */
.DevUpdate__UpdateDate {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--grey500);
}

/* The way out to the archive, and the answer to "where did that post about X go" - the home
   page only keeps ten days of them. Sits on the dark panel below the last card, so it is light
   text rather than the grey700 the cards use. */
.DevUpdate__More {
    margin: 12px 0 0;
    text-align: right;
    font-size: 14px;
}
.DevUpdate__More a {
    color: var(--grey100);
    text-decoration: underline;
}

/* The pin. Tinted and rule-marked like main.css's callout, so it reads as the standing notice
   at the top of the section rather than as the newest post. */
.DevUpdate--pinned {
    background-color: var(--teal100);
    border-left: 4px solid var(--teal600);
    padding-left: 12px;
}
.DevUpdate--pinned .DevUpdate__Title {
    color: var(--teal900);
}
.DevUpdate--pinned .DevUpdate__Summary::after {
    border-color: var(--teal600);
}

/* A note is a row in a list rather than a card of its own: the fill stays (dropping it puts
   grey900 text straight onto the dark .EventInfo panel and the title disappears), but the
   margin between them goes, so a run of notes is one surface divided by hairlines. Ordering
   puts notes last, which is what makes :last-child a safe place to close the block off. */
.DevUpdate--note {
    padding: 0 16px;
    margin-bottom: 0;
}
.DevUpdate--note + .DevUpdate--note {
    border-top: 1px solid var(--grey300);
}
.DevUpdate--note:last-child {
    margin-bottom: 12px;
}
.DevUpdate--note .DevUpdate__Title {
    font-size: 15px;
    font-weight: 600;
}
.DevUpdate--note .DevUpdate__Body {
    padding-bottom: 8px;
}
/* ────────────────── Reactions on a dev update ──────────────────
   The results page has its own set of these (.react-*, results.css) and they are
   deliberately not shared. That badge is squeezed into a 42px gutter beside a
   scoreline on a dark row; this one is a row of pills with room to breathe at the
   foot of a light card, and every value below - sizes, colours, the layout - would
   have had to be overridden anyway. Two small rulesets beat one with a modifier on
   every line.

   The palette here is light-on-white: .DevUpdate sits on --grey100 with --grey900
   text, the inverse of the results page. */

.DevUpdate__Reacts {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-bottom: 4px;
}
/* Nothing painted here - the feature is off site-wide, or this post predates ids. The slot has
   to stay in the DOM for UpdateReactions to find, but it must not leave a gap under a shut
   post, which is otherwise the tidiest thing on the page. */
.DevUpdate__Reacts:empty {
    margin-top: 0;
    padding-bottom: 0;
}

/* While a panel is open, lift the whole slot above the posts below it. The slot is a
   positioned element and so its own stacking context, which the panel cannot escape by
   z-index alone. 900 keeps it under the fixed title bar (1000). */
.DevUpdate__Reacts.dur-open {
    z-index: 900;
}

.dur-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--grey300);
    border-radius: 999px;
    background-color: #fff;
    cursor: pointer;
    line-height: 1.2;
}
.dur-pill:hover {
    border-color: var(--grey500);
}
/* Yours. A tinted fill and a solid border rather than a full teal block: on a light card
   a saturated pill reads as a call to action - a button to press - when what it means is
   "you already did this". */
.dur-pill.dur-mine {
    border-color: var(--teal600);
    background-color: var(--teal100);
}
.dur-emoji {
    font-size: 15px;
    line-height: 1;
}
.dur-count {
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--grey700);
    font-variant-numeric: tabular-nums;
}
.dur-pill.dur-mine .dur-count {
    color: var(--teal800);
}

/* Always visible, unlike the results page's `+` which appears on hover: there is one of
   these per post rather than one per row, so it costs nothing to leave on - and hover
   does not exist on the phones most of this audience reads the updates on. */
.dur-add {
    padding: 3px 10px;
    border: 1px dashed var(--grey300);
    border-radius: 999px;
    background: none;
    color: var(--grey600);
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}
.dur-add:hover {
    border-style: solid;
    border-color: var(--grey500);
    color: var(--grey800);
}
/* The first reaction on a post has to be invited - a bare + next to nothing at all does
   not read as something you may press. */
.dur-add-first {
    font-weight: 500;
}

.dur-error {
    flex-basis: 100%;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    color: var(--red600);
}

/* ─── The floating panel ───
   Opens upward from the button; updateReactions.js flips it below for a post near the
   top of the viewport, and shifts it back inside the screen after measuring. */

.dur-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 210px;
    /* Backstop for the measured clamp in JS - the panel must never be wider than the
       screen in the first place. */
    max-width: calc(100vw - 16px);
    padding: 6px;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid var(--grey300);
    box-shadow: 0 6px 20px var(--shadow);
    cursor: default;
}
.dur-panel:focus {
    outline: none;
}
.dur-panel-below {
    bottom: auto;
    top: calc(100% + 8px);
}

/* Grid rather than a wrapping flex row: flex fits as many as it can per line, which
   splits the palette unevenly and re-splits it at every width. Two rows of five is
   always two rows of five.

   Five columns because the palette is ten. If it grows again, pick a divisor - a
   trailing row with two emoji in it looks like a mistake rather than a set. */
.dur-panel-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}
.dur-choice {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 6px 4px;
    border-radius: 10px;
}
.dur-choice:hover {
    background-color: var(--grey200);
}
.dur-choice:focus {
    outline: none;
}
.dur-choice:focus-visible {
    outline: 2px solid var(--grey700);
    outline-offset: -2px;
}
/* One you already left. Tapping it again takes it back. */
.dur-chosen {
    background-color: var(--teal200);
}

.dur-panel-who {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--grey200);
    /* A post with hundreds of reactions has a names list longer than the screen. */
    max-height: 40vh;
    overflow-y: auto;
}
.dur-who-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 4px;
}
.dur-who-emoji {
    font-size: 15px;
    line-height: 1;
}
.dur-who-names {
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    color: var(--grey700);
}

.LatestUpdates__Feedback {
    color: var(--grey400);
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    margin-top: 18px;
}

.LatestUpdates__Feedback a {
    color: var(--grey300);
}