/* About Workshop - scoped to .about-workshop. Inherits the layout font (eudoxus-sans) and Coject theme variables. */
.about-workshop {
    --aw-ink: var(--textColor, #f4f3ef);
    --aw-muted: var(--iconColor, #9a9e9d);
    --aw-quiet: #697171;
    --aw-panel: var(--secColor, #191e1e);
    --aw-bg: var(--backColor, #111516);
    --aw-accent: var(--mainColor, #71e6ca);
    --aw-line: rgba(240, 242, 233, .11);
    --aw-amber: #f1c776;
    --aw-coral: #ff937f;
    font-family: 'eudoxus-sans', sans-serif;
    color: var(--aw-ink);
    /*max-width: 1260px;*/
    margin: 0 auto;
    padding-bottom: 60px;
    font-size: 14px;
    line-height: 1.5;
}

    .about-workshop *, .about-workshop button, .about-workshop input, .about-workshop select {
        font-family: inherit;
    }

    .about-workshop h1, .about-workshop h2, .about-workshop h3, .about-workshop p {
        margin-top: 0;
    }

    .about-workshop .aw-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    .about-workshop :focus-visible {
        outline: 2px solid var(--aw-accent);
        outline-offset: 3px;
    }

.aw-eyebrow {
    margin-bottom: 13px;
    color: var(--aw-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.aw-kicker {
    color: var(--aw-quiet);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.aw-h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.aw-sub {
    margin: 7px 0 0;
    color: var(--aw-muted);
    font-size: 12px;
}

/* Hero */
.aw-hero {
    padding: 48px 0 40px;
}

    .aw-hero h1 {
        margin-bottom: 17px;
        font-size: clamp(38px, 5.2vw, 64px);
        font-weight: 500;
        line-height: 1;
        letter-spacing: -.04em;
        color: var(--aw-ink);
    }

        .aw-hero h1 em {
            color: var(--aw-accent);
            font-style: normal;
        }

.aw-hero-copy {
    max-width: 600px;
    margin: 0;
    color: var(--aw-muted);
    font-size: 16px;
    line-height: 1.7;
}

.aw-hero-note {
    padding: 19px 20px 20px;
    border-left: 1px solid var(--aw-accent);
    background: linear-gradient(100deg, rgba(113,230,202,.09), transparent);
}

    .aw-hero-note strong {
        display: block;
        margin-bottom: 6px;
        font-size: 20px;
        font-weight: 500;
    }

    .aw-hero-note p {
        margin: 0;
        color: var(--aw-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .aw-hero-note a {
        display: inline-flex;
        margin-top: 16px;
        color: var(--aw-accent);
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
    }

/* Snapshot */
.aw-snapshot {
    margin-bottom: 52px;
    border: 1px solid var(--aw-line);
    border-radius: 15px;
    overflow: hidden;
    background: var(--aw-panel);
}

.aw-snap-cell {
    min-height: 118px;
    padding: 21px;
    border-right: 1px solid var(--aw-line);
    border-bottom: 1px solid var(--aw-line);
}

    .aw-snap-cell.first {
        background: linear-gradient(140deg, rgba(113,230,202,.14), transparent 65%);
    }

.aw-snap-label {
    margin-bottom: 10px;
    color: var(--aw-muted);
    font-size: 11px;
}

.aw-snap-value {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.aw-snap-meta {
    margin-top: 8px;
    color: var(--aw-quiet);
    font-size: 11px;
}

.aw-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--aw-amber);
    font-size: 12px;
    font-weight: 700;
}

    .aw-state::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .aw-state.published {
        color: var(--aw-accent);
    }

/* Registry panel */
.aw-panel {
    border: 1px solid var(--aw-line);
    border-radius: 15px;
    background: var(--aw-panel);
}

.aw-toolbar {
    border-bottom: 1px solid var(--aw-line);
    margin: 0;
}

.aw-search-wrap {
    position: relative;
    margin: 0;
}

    .aw-search-wrap i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--aw-quiet);
        font-size: 13px;
        pointer-events: none;
        z-index: 1;
    }

    .aw-search-wrap .coject-input {
        padding-left: 38px;
        background-color: var(--aw-bg) !important;
        border: 1px solid var(--aw-line);
    }

        .aw-search-wrap .coject-input:focus {
            border-color: var(--aw-accent);
        }

.about-workshop .aw-toolbar .coject-select {
    background-color: var(--aw-bg) !important;
    border: 1px solid var(--aw-line);
}

/* Grid "table" built from Bootstrap rows */
.aw-head {
    padding: 13px 15px;
    color: var(--aw-quiet);
    border-bottom: 1px solid var(--aw-line);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aw-row {
    margin: 0;
    padding: 14px 15px;
    align-items: center;
    border-bottom: 1px solid var(--aw-line);
    cursor: pointer;
    transition: background .16s;
}

    .aw-row:last-child {
        border-bottom: 0;
    }

    .aw-row:hover, .aw-row.selected {
        background: rgba(113,230,202,.065);
    }

.aw-component {
    display: flex;
    align-items: center;
    gap: 11px;
}

.aw-mark {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(113,230,202,.2);
    border-radius: 9px;
    color: var(--aw-accent);
    background: rgba(113,230,202,.07);
    font-size: 12px;
    font-weight: 600;
}

.aw-name {
    font-weight: 700;
}

.aw-type {
    margin-top: 2px;
    color: var(--aw-quiet);
    font-size: 10px;
}

.aw-version {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .aw-version.muted {
        color: var(--aw-quiet);
    }

.aw-mlabel {
    display: block;
    margin-bottom: 2px;
    color: var(--aw-quiet);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aw-capability {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--aw-coral);
    font-size: 10px;
}

    .aw-capability::before {
        content: "\2197";
        font-size: 11px;
    }

.aw-empty {
    padding: 40px 15px;
    color: var(--aw-muted);
    text-align: center;
}

/* Detail */
.aw-detail {
    position: sticky;
    top: 18px;
    padding: 21px;
    min-height: 310px;
}

    .aw-detail h3 {
        margin-bottom: 8px;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: -.02em;
    }

    .aw-detail > p {
        margin-bottom: 21px;
        color: var(--aw-muted);
        font-size: 12px;
        line-height: 1.65;
    }

.aw-rule {
    height: 1px;
    margin: 18px 0;
    background: var(--aw-line);
}

.aw-detail-line {
    margin: 12px 0;
    color: var(--aw-muted);
    font-size: 11px;
}

    .aw-detail-line strong {
        color: var(--aw-ink);
        font-size: 12px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.aw-detail-list {
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
}

    .aw-detail-list li {
        margin: 8px 0;
        color: var(--aw-muted);
        font-size: 11px;
    }

        .aw-detail-list li strong {
            color: var(--aw-ink);
            font-size: 12px;
            font-weight: 600;
        }

.aw-footer {
    margin: 48px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--aw-line);
    color: var(--aw-quiet);
    font-size: 11px;
}

    .aw-footer code {
        color: var(--aw-muted);
        background: none;
        font-family: inherit;
    }

@media (max-width: 991.98px) {
    .aw-detail {
        position: static;
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .aw-hero {
        padding: 36px 0 28px;
    }

    .aw-snapshot {
        margin-bottom: 40px;
    }
}