/* ============================================================
   PAGE-SCOPED STYLES — moved out of the individual html files.

   In the feed several pages live in one document at the same time,
   so every page's overrides must be loaded everywhere and must not
   leak into a neighbouring section. Rules stay scoped to the grid
   container id (the PAGE_GUIDE convention); the two rules that used
   to be global got the container id added.

   Shared base (html, body, .main-frame) stays in the page files —
   it is identical across all of them.
   ============================================================ */


/* ---------------------------- headings ---------------------------- */

/* Headings: a "# / ## / ###" mark plus the .bio-highlight right after it.
   Terminal Grotesque, caps — 26/26 desktop, 24/24 mobile. The adjacent
   sibling selector ignores the whitespace text node between the two spans,
   so plain running .bio-highlight text is untouched.
   Colours come from content-grid.css (mark white-20, title white-90).
   Applied on every index page: core (#gridContainer), signs (#stuffContainer),
   raw (#rawContainer), clay.pet (#clayPetGrid). */
#gridContainer .text-content .bio-header,
#gridContainer .text-content .bio-header + .bio-highlight,
#stuffContainer .text-content .bio-header,
#stuffContainer .text-content .bio-header + .bio-highlight,
#rawContainer .text-content .bio-header,
#rawContainer .text-content .bio-header + .bio-highlight,
#clayPetGrid .text-content .bio-header,
#clayPetGrid .text-content .bio-header + .bio-highlight,
#evenitGrid .text-content .bio-header,
#evenitGrid .text-content .bio-header + .bio-highlight,
#obrVarGrid .text-content .bio-header,
#obrVarGrid .text-content .bio-header + .bio-highlight,
#rufaPressGrid .text-content .bio-header,
#rufaPressGrid .text-content .bio-header + .bio-highlight,
#quopediaGrid .text-content .bio-header,
#quopediaGrid .text-content .bio-header + .bio-highlight,
#yaroGrid .text-content .bio-header,
#yaroGrid .text-content .bio-header + .bio-highlight {
    font-family: 'Terminal Grotesque', "Fragment Mono", monospace;
    font-size: 26px;
    line-height: 26px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    #gridContainer .text-content .bio-header,
    #gridContainer .text-content .bio-header + .bio-highlight,
    #stuffContainer .text-content .bio-header,
    #stuffContainer .text-content .bio-header + .bio-highlight,
    #rawContainer .text-content .bio-header,
    #rawContainer .text-content .bio-header + .bio-highlight,
    #clayPetGrid .text-content .bio-header,
    #clayPetGrid .text-content .bio-header + .bio-highlight,
    #evenitGrid .text-content .bio-header,
    #evenitGrid .text-content .bio-header + .bio-highlight,
    #obrVarGrid .text-content .bio-header,
    #obrVarGrid .text-content .bio-header + .bio-highlight,
    #rufaPressGrid .text-content .bio-header,
    #rufaPressGrid .text-content .bio-header + .bio-highlight,
    #quopediaGrid .text-content .bio-header,
    #quopediaGrid .text-content .bio-header + .bio-highlight,
    #yaroGrid .text-content .bio-header,
    #yaroGrid .text-content .bio-header + .bio-highlight {
        font-size: 24px;
        line-height: 24px;
    }
}


/* ---------------------------- quopedia ---------------------------- */

/* All grid text white-90 (was an inline rule in the standalone quopedia.html).
   Scoped to #quopediaGrid so it cannot leak into a neighbouring feed section. */
#quopediaGrid .text-content {
    color: var(--white-90);
}


/* ---------------------------- signs ---------------------------- */

/* bottomText spacing: top = one line, no bottom */
#stuffContainer .image-wrapper + .text-content,
#stuffContainer .video-wrapper + .text-content {
    padding-top: 16px;
    padding-bottom: 0 !important;
}

/* remove inline margin-bottom injected by bundle */
#stuffContainer .content-grid-item {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    #stuffContainer .image-wrapper + .text-content,
    #stuffContainer .video-wrapper + .text-content {
        padding-top: 19px;
    }
}

/* dashed dividers under every block — 1px line spanning the column, 24px
   clear above and below (matches the menu rule style).
   below the line: 13px margin + 11px .content-column gap = 24px.
   :has() on the media wrappers skips the empty spacer item. */
#stuffContainer .content-grid-item:has(.image-wrapper),
#stuffContainer .content-grid-item:has(.video-wrapper) {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    padding-bottom: 24px;
    margin-bottom: 13px !important;
}


/* ----------------------------- raw ----------------------------- */

/* bottomText spacing: top = one line, no bottom */
#rawContainer .image-wrapper + .text-content,
#rawContainer .video-wrapper + .text-content {
    padding-top: 16px;
    padding-bottom: 0 !important;
}

/* remove inline margin-bottom injected by bundle */
#rawContainer .content-grid-item {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    #rawContainer .image-wrapper + .text-content,
    #rawContainer .video-wrapper + .text-content {
        padding-top: 19px;
    }
}

/* Shrink just the <video> element; wrapper stays full-width
   so dots-row spans the full block naturally.
   (was global — scoped to #rawContainer for the feed) */
#rawContainer .content-grid-item:has(video[src*="botworks"]) video {
    width: 40%;
    max-width: 40%;
    margin-left: auto;
    margin-right: auto;
}

/* dashed dividers under every block — 1px line spanning the column, 24px
   clear above and below (matches the menu rule style).
   below the line: 13px margin + 11px .content-column gap = 24px.
   the :has() list covers media and text blocks while skipping empty spacers. */
#rawContainer .content-grid-item:has(.image-wrapper),
#rawContainer .content-grid-item:has(.video-wrapper),
#rawContainer .content-grid-item:has(.text-content:not(:empty)) {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    padding-bottom: 24px;
    margin-bottom: 13px !important;
}


/* --------------------- clay.pet · even.it · yaro --------------------- */

/* bottomText spacing: top = one line, no bottom (matches signs/raw) */
#clayPetGrid .image-wrapper + .text-content,
#clayPetGrid .video-wrapper + .text-content,
#evenitGrid .image-wrapper + .text-content,
#evenitGrid .video-wrapper + .text-content,
#yaroGrid .image-wrapper + .text-content,
#yaroGrid .video-wrapper + .text-content {
    padding-top: 16px;
    padding-bottom: 0 !important;
}

/* remove inline margin-bottom injected by bundle */
#clayPetGrid .content-grid-item,
#evenitGrid .content-grid-item,
#yaroGrid .content-grid-item {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    #clayPetGrid .image-wrapper + .text-content,
    #clayPetGrid .video-wrapper + .text-content,
    #evenitGrid .image-wrapper + .text-content,
    #evenitGrid .video-wrapper + .text-content,
    #yaroGrid .image-wrapper + .text-content,
    #yaroGrid .video-wrapper + .text-content {
        padding-top: 19px;
    }
}


/* ------------------- raw · even.it pattern maker ------------------- */

.evenit-fields-wrap {
    display: flex;
    width: 100%;
    position: relative;
}

.evenit-field-wrap {
    flex: 1;
    touch-action: none;
    user-select: none;
    display: block;
    line-height: 0;
}

.evenit-field-wrap svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
}

#evenit-container path.hit {
    cursor: crosshair;
}

/* DOTS DISABLED
#evenit-container .evenit-dots-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

#evenit-container .evenit-dots-row span {
    color: var(--white-90);
    user-select: none;
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    line-height: 16px;
}
*/

#evenit-container .evenit-controls {
    padding: 16px 17.3px;
    color: var(--white-20);
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

#evenit-container .evenit-comment {
    color: var(--white-20);
    display: inline-block;
    text-indent: -3ch;
    padding-left: 3ch;
}

#evenit-container .evenit-color-field {
    display: inline;
    color: var(--white-20);
}

.evenit-color-input {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    outline: none;
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    color: var(--white-90);
    padding: 2px 4px;
    line-height: 18px;
    width: 80px;
    caret-color: var(--white-90);
}

/* tool buttons (.evenit-action-btn) styled in components/links/links.css */

@media (max-width: 768px) {
    #evenit-container .evenit-controls {
        padding: 19px calc(5vw + 17.3px);
        font-size: 14px;
        line-height: 20px;
    }

    #evenit-container .evenit-comment {
        font-size: 14px;
        line-height: 19px;
    }
}


/* --------------------------- clay.pet --------------------------- */

/* Gap between buttons and bottom image — vgap (8px) instead of default 19px
   (was global — scoped to #clayPetGrid for the feed) */
#clayPetGrid .content-grid-item.text-block .text-block-bottom-wrapper {
    margin-top: 8px;
}