/*
   ARCHIVE PAGE ISOLATION WRAPPER
   Scoped to #tt-archive-wrapper
*/
#tt-archive-wrapper {
    --bg-color: #F8F8F6;
    --text-color: var(--tt-ink, #253D3D);
    --heading-color: var(--tt-green, #3A5F5F);
    --meta-color: var(--tt-meta, #526666);
    --border-color: var(--tt-line, #CAD6D4);
    --accent-color: #3A5F5F;
    --status-live: #3A5F5F;
    --status-wip: #A07E28;
    --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "Menlo", monospace;
    --space-md: 2rem;
    --space-lg: 4rem;

    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-family: var(--font-main) !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: block !important;
    min-height: 80vh !important;
}

/* HEADER SECTION */
#tt-archive-wrapper .tt-page-header {
    padding: var(--space-lg) var(--space-md) !important;
    border-bottom: 1px solid var(--border-color) !important;
    max-width: 800px !important;
}

#tt-archive-wrapper h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.1 !important;
    color: var(--heading-color) !important;
}

#tt-archive-wrapper .tt-intro-p {
    font-size: 1.1rem !important;
    color: var(--meta-color) !important;
    margin: 0 !important;
    max-width: 60ch !important;
}

/* ARCHIVE LIST CONTAINER */
#tt-archive-wrapper .tt-archive-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* LIST HEADERS (Desktop Only) */
#tt-archive-wrapper .tt-list-header {
    display: grid !important;
    grid-template-columns: 2fr 3fr 1fr 1fr !important;
    padding: 1rem var(--space-md) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    color: var(--meta-color) !important;
    background: rgba(58,95,95,0.05) !important;
}

/* LIST ITEM ROW */
#tt-archive-wrapper .tt-archive-item {
    display: grid !important;
    grid-template-columns: 2fr 3fr 1fr 1fr !important;
    padding: var(--space-md) !important;
    border-bottom: 1px solid var(--border-color) !important;
    text-decoration: none !important;
    color: var(--text-color) !important;
    transition: background-color 0.15s ease !important;
    align-items: center !important;
}

#tt-archive-wrapper .tt-archive-item:hover {
    background-color: #FFFFFF !important;
    color: var(--accent-color) !important;
}

/* CELL STYLES */
#tt-archive-wrapper .tt-col-title {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

#tt-archive-wrapper .tt-col-desc {
    color: var(--tt-black, #111111) !important;
    font-size: 1rem !important;
    padding-right: 2rem !important;
    line-height: 1.4 !important;
}

#tt-archive-wrapper .tt-archive-item:hover .tt-col-desc {
    color: var(--tt-black, #111111) !important;
}

#tt-archive-wrapper .tt-col-meta {
    font-family: var(--font-mono) !important;
    font-size: 0.9rem !important;
}

/* STATUS INDICATORS */
#tt-archive-wrapper .tt-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-mono) !important;
    font-size: 0.8rem !important;
}

#tt-archive-wrapper .tt-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

#tt-archive-wrapper .dot-wip { background-color: var(--status-wip) !important; }
#tt-archive-wrapper .dot-live { background-color: var(--status-live) !important; }

/* RESPONSIVE */
@media (max-width: 768px) {
    #tt-archive-wrapper .tt-list-header {
        display: none !important; /* Hide headers on mobile */
    }

    #tt-archive-wrapper .tt-archive-item {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        padding: 1.5rem var(--space-md) !important;
    }

    #tt-archive-wrapper .tt-col-desc {
        padding-right: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    #tt-archive-wrapper .tt-col-meta {
        color: var(--meta-color) !important;
        font-size: 0.8rem !important;
    }
}

/* 2.2: search, filters, sorting and pages */
#tt-archive-wrapper .tt-filters { padding: 1.5rem var(--space-md) 0 !important; border-bottom: 1px solid var(--border-color) !important; }
#tt-archive-wrapper .tt-filters__row { display: flex !important; flex-wrap: wrap !important; gap: 1.25rem 2rem !important; align-items: flex-end !important; }
#tt-archive-wrapper .tt-filters__label { display: block !important; font-family: var(--font-mono) !important; font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--meta-color) !important; margin-bottom: .35rem !important; }
#tt-archive-wrapper .tt-filters__search { flex: 1 1 320px !important; max-width: 520px !important; }
#tt-archive-wrapper .tt-filters input[type=search], #tt-archive-wrapper .tt-filters select { width: 100% !important; font: 1rem/1.4 var(--font-main) !important; color: var(--text-color) !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--text-color) !important; border-radius: 0 !important; padding: .45rem 0 !important; -webkit-appearance: none !important; appearance: none !important; }
#tt-archive-wrapper .tt-filters select { font-family: var(--font-mono) !important; font-size: .85rem !important; padding-right: 1.4rem !important; cursor: pointer !important; background-image: linear-gradient(45deg, transparent 50%, var(--text-color) 50%), linear-gradient(135deg, var(--text-color) 50%, transparent 50%) !important; background-position: calc(100% - 8px) 55%, calc(100% - 3px) 55% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
#tt-archive-wrapper .tt-filters__select { min-width: 150px !important; }
#tt-archive-wrapper .tt-filters input:focus, #tt-archive-wrapper .tt-filters select:focus { outline: none !important; border-bottom-color: var(--accent-color) !important; box-shadow: 0 1px 0 var(--accent-color) !important; }
#tt-archive-wrapper .tt-filters__go { font: .8rem/1 var(--font-mono) !important; background: transparent !important; color: var(--tt-black, #111111) !important; border: 1px solid var(--tt-black, #111111) !important; border-radius: 0 !important; padding: .7rem 1.2rem !important; cursor: pointer !important; }
#tt-archive-wrapper .tt-filters__go:hover, #tt-archive-wrapper .tt-filters__go:focus-visible { background: var(--accent-color) !important; border-color: var(--accent-color) !important; color: #FFFFFF !important; }
#tt-archive-wrapper .tt-chips { display: flex !important; flex-wrap: wrap !important; gap: .5rem !important; margin: 1.25rem 0 0 !important; }
#tt-archive-wrapper .tt-chip { display: inline-flex !important; align-items: center !important; gap: 0 !important; font: .75rem/1 var(--font-mono) !important; color: var(--text-color) !important; text-decoration: none !important; border: 1px solid var(--border-color) !important; padding: .5rem .75rem !important; background: transparent !important; }
#tt-archive-wrapper .tt-chip:hover { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
#tt-archive-wrapper .tt-chip.is-on { background: var(--accent-color) !important; border-color: var(--accent-color) !important; color: #FFFFFF !important; }
#tt-archive-wrapper .tt-chip.is-on .tt-dot { box-shadow: 0 0 0 1px #FFFFFF !important; }
#tt-archive-wrapper .tt-chip__n { margin-left: .5rem !important; opacity: .6 !important; }
#tt-archive-wrapper .tt-filters__count { margin: 1rem 0 0 !important; padding: 0 0 1rem !important; font: .75rem/1.4 var(--font-mono) !important; color: var(--meta-color) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
#tt-archive-wrapper .tt-filters__count a, #tt-archive-wrapper .tt-archive-empty a { color: var(--accent-color) !important; text-underline-offset: 3px !important; }
#tt-archive-wrapper .tt-col-code { display: block !important; margin-top: .3rem !important; font: 400 .75rem/1.2 var(--font-mono) !important; color: var(--meta-color) !important; letter-spacing: .02em !important; }
#tt-archive-wrapper .tt-archive-item:hover .tt-col-code { color: var(--accent-color) !important; }
#tt-archive-wrapper .tt-archive-item { box-shadow: inset 0 0 0 transparent !important; }
#tt-archive-wrapper .tt-archive-item:hover { box-shadow: inset 2px 0 0 var(--accent-color) !important; }
#tt-archive-wrapper .tt-archive-item:focus-visible { outline: 2px solid var(--accent-color) !important; outline-offset: -2px !important; }
#tt-archive-wrapper .tt-archive-empty { padding: 2rem var(--space-md) !important; margin: 0 !important; }
#tt-archive-wrapper .tt-pager { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 1rem !important; padding: 2rem var(--space-md) 3rem !important; font: .8rem/1 var(--font-mono) !important; }
#tt-archive-wrapper .tt-pager__nums { display: flex !important; gap: .25rem !important; flex-wrap: wrap !important; }
#tt-archive-wrapper .tt-pager a, #tt-archive-wrapper .tt-pager span { color: var(--text-color) !important; text-decoration: none !important; }
#tt-archive-wrapper .tt-pager__num { min-width: 2.25rem !important; text-align: center !important; padding: .6rem .4rem !important; border: 1px solid transparent !important; }
#tt-archive-wrapper a.tt-pager__num:hover, #tt-archive-wrapper a.tt-pager__step:hover { color: var(--accent-color) !important; border-color: var(--accent-color) !important; }
#tt-archive-wrapper .tt-pager__num.is-on { border-color: var(--text-color) !important; }
#tt-archive-wrapper .tt-pager__step { padding: .6rem .9rem !important; border: 1px solid var(--tt-black, #111111) !important; color: var(--tt-black, #111111) !important; }
#tt-archive-wrapper .tt-pager__step.is-off { opacity: .3 !important; border-color: var(--border-color) !important; }
#tt-archive-wrapper .tt-pager__gap { padding: .6rem .2rem !important; color: var(--meta-color) !important; }
@media (max-width: 768px) {
    #tt-archive-wrapper .tt-filters__go { width: 100% !important; }
    #tt-archive-wrapper .tt-pager { flex-wrap: wrap !important; justify-content: center !important; }
}

/* 2.4: each row is a block with one stretched link (so a demo link can sit inside it), stage badges, stage filter */
#tt-archive-wrapper .tt-archive-item { position: relative !important; }
#tt-archive-wrapper .tt-archive-item__link { color: var(--heading-color) !important; text-decoration: none !important; }
#tt-archive-wrapper .tt-archive-item__link::after { content: "" !important; position: absolute !important; inset: 0 !important; }
#tt-archive-wrapper .tt-archive-item__link:focus-visible { outline: none !important; }
#tt-archive-wrapper .tt-archive-item:focus-within { outline: 2px solid var(--accent-color) !important; outline-offset: -2px !important; }
#tt-archive-wrapper .tt-archive-item:hover .tt-archive-item__link { color: #253D3D !important; }
#tt-archive-wrapper .tt-demo-link { position: relative !important; z-index: 1 !important; display: inline-block !important; margin-top: .6rem !important; font: .8rem/1.3 var(--font-mono) !important; color: var(--tt-black, #111111) !important; text-decoration: none !important; border-bottom: 1px solid transparent !important; transition: color .2s ease, border-color .2s ease !important; }
#tt-archive-wrapper .tt-demo-link:hover, #tt-archive-wrapper .tt-demo-link:focus-visible { color: var(--accent-color) !important; border-bottom-color: var(--accent-color) !important; }
#tt-archive-wrapper .tt-col-desc { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
#tt-archive-wrapper .tt-col-status { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }
#tt-archive-wrapper .tt-stage { display: inline-flex !important; align-items: center !important; gap: .4rem !important; font: .68rem/1.2 var(--font-mono) !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--status-wip) !important; border: 1px solid var(--status-wip) !important; padding: .2rem .45rem !important; border-radius: 0 !important; }
#tt-archive-wrapper .tt-stage__mark { width: 6px !important; height: 6px !important; background: currentColor !important; display: inline-block !important; }
#tt-archive-wrapper .tt-stage--live { color: var(--status-live) !important; border-color: var(--status-live) !important; }
@media (max-width: 768px) {
    #tt-archive-wrapper .tt-col-status { flex-direction: row !important; align-items: center !important; gap: .75rem !important; }
}

/* 2.5: the project's square logo before its name, when it has one. */
#tt-archive-wrapper .tt-pmark { float: left !important; display: inline-flex !important; width: 32px !important; height: 32px !important; margin: 0 .75rem 0 0 !important; border: 1px solid var(--border-color) !important; background: #FFFFFF !important; box-sizing: border-box !important; overflow: hidden !important; }
#tt-archive-wrapper .tt-pmark img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; margin: 0 !important; border-radius: 0 !important; }
#tt-archive-wrapper .tt-col-title::after { content: "" !important; display: block !important; clear: both !important; }

/* 2.8: stage chips (they replace the status chips and the stage menu): the badge's square mark, gold in progress, green when live */
#tt-archive-wrapper .tt-chip__mark { width: 6px !important; height: 6px !important; background: var(--status-wip) !important; display: inline-block !important; margin-right: .5rem !important; }
#tt-archive-wrapper .tt-chip__mark--live { background: var(--status-live) !important; }
#tt-archive-wrapper .tt-chip.is-on .tt-chip__mark { background: #FFFFFF !important; }

/* 2.8.4: results load in place (assets/js/archive.js). Apply is only needed without JavaScript. */
#tt-archive-wrapper.is-live .tt-filters__go { display: none !important; }
#tt-archive-wrapper [data-tt-swap="list"], #tt-archive-wrapper [data-tt-swap="pager"] { transition: opacity .15s ease !important; }
#tt-archive-wrapper.is-loading [data-tt-swap="list"], #tt-archive-wrapper.is-loading [data-tt-swap="pager"] { opacity: .45 !important; }
@media (prefers-reduced-motion: reduce) {
	#tt-archive-wrapper [data-tt-swap="list"], #tt-archive-wrapper [data-tt-swap="pager"] { transition: none !important; }
}