/* ============================================================
   /tags — browse posts by tag.
   The old page shipped every tag with every post inlined, which
   came to 2.8MB. This one ships the data once and renders on
   demand, so the page stays usable on a phone.
   ============================================================ */

/* --- filter bar: the page's primary control, so it stays reachable --- */
.tg-search {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px 0 14px;
    /* opaque so list content scrolls out of sight underneath it. No spread
       shadow here: it painted over the status line sitting just below. */
    background: #1d1d1d;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tg-search input {
    /* min-width:0 lets the input actually shrink; flex items default to their
       content width and would otherwise push the button off the row */
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 11px 14px 11px 38px;
    font-family: 'Inconsolata', 'Courier New', monospace;
    font-size: 16px;               /* 16px avoids the iOS zoom-on-focus jump */
    color: #e6e6e6;
    background: #262626 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a9299' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E") no-repeat 13px center;
    background-size: 15px 15px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
}
.tg-search input::placeholder { color: #7c7c7c; }
.tg-search .tg-more {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    margin: 0;
}
/* plain link, not a second button: this is an escape hatch, not an action of
   equal weight. :visited named because a bare class is (0,1,0) and loses to
   the site-wide a:visited at (0,1,1). */
.tg-oldlink,
.tg-oldlink:visited {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #6aa9f5;
    font-size: 14px;
    text-decoration: none;
}
.tg-oldlink:hover { text-decoration: underline; }
.tg-oldlink:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 169, 245, 0.35);
    border-radius: 4px;
}
.tg-search input:focus {
    outline: none;
    border-color: #6aa9f5;
    box-shadow: 0 0 0 3px rgba(106, 169, 245, 0.25);
}

.tg-status {
    color: #8a9299;
    font-size: 13px;
    margin: 0 0 10px;
    font-family: 'Inconsolata', 'Courier New', monospace;
}

/* --- tag chips --- */
.tg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 6px; }
/* Every link class on this page names :visited explicitly. The site-wide
   a:visited rule is (0,1,1) and outranks a bare class at (0,1,0), so any
   class that colours an anchor gets flipped to link blue once visited. */
.tg-chip,
.tg-chip:visited {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #ebe4b8;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.4;
}
.tg-chip .n {
    font-family: 'Inconsolata', 'Courier New', monospace;
    font-size: 12px;
    color: #8a9299;
}
.tg-chip:hover, .tg-chip:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f6f1d8;
    text-decoration: none;
    outline: none;
}
.tg-chip:focus-visible { box-shadow: 0 0 0 3px rgba(106, 169, 245, 0.35); }
.tg-chip.is-on {
    background: rgba(235, 228, 184, 0.14);
    border-color: rgba(235, 228, 184, 0.45);
}

/* --- selected tag header --- */
.tg-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}
.tg-head h2 {
    margin: 0;
    font-size: 25px;
    /* tags2.css loads after custom.css, so this beats .post-content h2 on order */
    color: #ebe4b8;
    word-break: break-word;
}
.tg-head h2 a.tg-posttitle,
.tg-head h2 a.tg-posttitle:visited { color: #6aa9f5; text-decoration: none; }
.tg-head h2 a.tg-posttitle:hover { text-decoration: underline; }
.tg-head .c {
    color: #8a9299;
    font-size: 14px;
    font-family: 'Inconsolata', 'Courier New', monospace;
}
.tg-back,
.tg-back:visited {
    margin-left: auto;
    color: #6aa9f5;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.tg-back:hover { text-decoration: underline; }

/* --- post list --- */
/* Titles wrap like the tag chips rather than sitting in fixed columns: writeup
   titles vary from "HTB: Cat" to a full Holiday Hack line, so equal-width
   columns left most of each row empty. */
.tg-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.tg-posts a,
.tg-posts a:visited {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    /* blue where tag chips are yellow, so the two kinds never read as one set */
    color: #6aa9f5;
    text-decoration: none;
    line-height: 1.4;
}
.tg-posts a:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    text-decoration: none;
}
.tg-posts a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 169, 245, 0.35);
}
.tg-posts .t { font-size: 14px; }

/* --- one card per matching tag --- */
.tg-cards {
    /* Two columns once there is room for them, one below that. No explicit
       breakpoint: 2 x 430 plus the gap needs 874px, and the content wrapper
       caps at 1040px, so this can never reach three. align-items:start keeps a
       two-post card from stretching to match a forty-post one beside it. */
    display: grid;
    /* min() so the 430px floor can never exceed a narrow viewport; a bare
       minmax(430px, 1fr) forces a 430px column at 390px wide and the card
       overflows the screen sideways */
    grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
    align-items: start;
    gap: 14px;
    margin: 4px 0 0;
}
.tg-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}
.tg-cardhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tg-tagname,
.tg-tagname:visited {
    color: #ebe4b8;
    font-size: 15px;
    text-decoration: none;
    word-break: break-word;
}
.tg-tagname:hover { text-decoration: underline; }
.tg-tagname:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 169, 245, 0.35);
    border-radius: 4px;
}
.tg-cardhead .d {
    color: #8a9299;
    font-size: 12px;
    font-family: 'Inconsolata', 'Courier New', monospace;
    white-space: nowrap;
    flex-shrink: 0;
}
.tg-cardbody {
    /* the list scrolls inside the card, so a 485-post tag takes the same room
       on the page as a 1-post tag and nothing is hidden behind a click */
    max-height: 260px;
    overflow-y: auto;
    padding: 2px 12px 4px;
    overscroll-behavior: contain;
}
.tg-cardbody::-webkit-scrollbar { width: 9px; }
.tg-cardbody::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 5px;
}
.tg-cardbody { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.tg-cardbody { padding: 10px 12px 12px; }

/* --- expand-all --- */
.tg-allhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}
.tg-allhead span { color: #8a9299; font-size: 13px; }

/* --- hover card: the tags on a post, without leaving the page --- */
.tg-pop {
    position: absolute;
    z-index: 30;
    max-width: min(560px, 92vw);
    padding: 11px 13px 12px;
    background: #242424;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 12px 30px -10px rgba(0, 0, 0, 0.6);
}
.tg-pophead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 9px;
    color: #e6e6e6;
    font-size: 14px;
}
.tg-pophead span {
    color: #8a9299;
    font-size: 12px;
    font-family: 'Inconsolata', 'Courier New', monospace;
    white-space: nowrap;
    flex-shrink: 0;
}
.tg-pop .tg-chips { margin: 0; }
.tg-pop .tg-chip { font-size: 13px; padding: 3px 8px; }

.tg-empty { color: #a9a9a9; margin: 16px 0; }
.tg-empty code { color: #ebe4b8; }

.tg-more {
    display: inline-block;
    margin: 10px 0 0;
    padding: 6px 12px;
    font-size: 14px;
    color: #6aa9f5;
    background: none;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.tg-more:hover { border-color: #6aa9f5; }
.tg-more:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106, 169, 245, 0.35); }

/* --- phones --- */
@media (max-width: 600px) {
    .tg-posts a { font-size: 15px; padding: 6px 11px; }
    .tg-head h2 { font-size: 21px; }
    .tg-back { margin-left: 0; }
    .tg-chip { font-size: 15px; padding: 6px 11px; }  /* bigger touch target */
    .tg-search { flex-wrap: wrap; }
    /* the button and the link share the wrapped row, so the bar costs two rows
       rather than three on a phone */
    .tg-search .tg-more { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .tg-chip, .tg-posts a, .tg-more { transition: none; }
}