/* Lab listing grid + tool-page header. Uses Chemist theme tokens inherited from the page root. */

.lt-section { max-width: 1180px; margin: 0 auto; padding: 8px 32px 16px; }

.lt-head { margin-bottom: 30px; }
.lt-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: Cinzel, serif; font-size: 11px; letter-spacing: .24em;
    text-transform: uppercase; color: var(--gold, #C8922E); margin-bottom: 12px;
}
.lt-kicker .lt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #C8922E); animation: 2s ease-in-out 0s infinite normal none running pulse; }
.lt-title { font-family: "EB Garamond", serif; font-weight: 500; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.4px; margin: 0 0 10px; color: var(--ink, #2A2418); }
.lt-sub { font-size: 18px; line-height: 1.55; color: var(--ink2, #5C5238); margin: 0; max-width: 64ch; text-wrap: pretty; }

.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

.lt-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px; min-height: 210px;
    padding: 24px 24px 20px; text-decoration: none; color: inherit;
    background: var(--plate, #E4D8B6); border: 1px solid var(--line, rgba(42,36,24,0.22)); border-radius: 4px;
    box-shadow: rgba(200,146,46,0.14) 0 3px 0 inset;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
}
/* Modern touch: a soft category-tinted sheen that lifts in on hover. */
.lt-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(120% 82% at 14% 0%, color-mix(in srgb, var(--gold,#C8922E) 13%, transparent), transparent 60%);
    transition: opacity .25s ease;
}
.lt-card > * { position: relative; z-index: 1; }
a.lt-card:hover, a.lt-card:focus-visible { transform: translateY(-5px); border-color: color-mix(in srgb, var(--gold,#C8922E) 60%, transparent); box-shadow: rgba(20,15,8,.24) 0 24px 46px -26px, rgba(200,146,46,0.36) 0 3px 0 inset; outline: none; }
a.lt-card:hover::before, a.lt-card:focus-visible::before { opacity: 1; }
.lt-card.is-soon { opacity: .5; filter: saturate(.7); }

.lt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lt-icon {
    width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    color: var(--gold, #C8922E); border-radius: 4px; background: var(--bg, #EDE3C7);
    border: 1px solid color-mix(in srgb, var(--gold,#C8922E) 30%, transparent);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
a.lt-card:hover .lt-icon, a.lt-card:focus-visible .lt-icon { transform: rotate(-4deg) scale(1.06); }
.lt-icon svg { width: 22px; height: 22px; }
.lt-status {
    font-family: Cinzel, serif; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.lt-status.is-live  { background: color-mix(in srgb, var(--gold,#C8922E) 16%, transparent); color: var(--gold, #C8922E); border-color: color-mix(in srgb, var(--gold,#C8922E) 40%, transparent); }
.lt-status.is-soon  { background: transparent; color: var(--ink3, #8A7E60); border-color: var(--line, rgba(42,36,24,0.28)); }
.lt-status.is-idea  { background: transparent; color: var(--ink3, #8A7E60); border-color: var(--line, rgba(42,36,24,0.18)); }

.lt-card-title { font-family: "EB Garamond", serif; font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0; color: var(--ink, #2A2418); }
.lt-card-desc { font-size: 15.5px; line-height: 1.5; color: var(--ink2, #5C5238); margin: 0; flex: 1 1 auto; text-wrap: pretty; }
.lt-card-foot {
    margin-top: 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lt-open { font-family: Cinzel, serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold, #C8922E); display: inline-flex; align-items: center; gap: 8px; }
.lt-card.is-soon .lt-open { color: var(--ink3, #8A7E60); }
a.lt-card .lt-open .lt-arrow { transition: transform .25s; }
a.lt-card:hover .lt-open .lt-arrow { transform: translateX(4px); }

.lt-cat-chip {
    font-family: Cinzel, serif; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line, rgba(42,36,24,0.2));
    color: var(--ink3, #8A7E60); background: color-mix(in srgb, var(--ink, #2A2418) 4%, transparent);
}

/* Category-accented icons: tinted at rest, filled with the category colour on hover —
   ties the modern hover motion into the existing category system. */
.lt-cat-writing   .lt-icon { color: #C8922E; border-color: color-mix(in srgb, #C8922E 42%, transparent); }
.lt-cat-markets   .lt-icon { color: #287849; border-color: color-mix(in srgb, #287849 42%, transparent); }
.lt-cat-onchain   .lt-icon { color: #3E6CA8; border-color: color-mix(in srgb, #3E6CA8 42%, transparent); }
.lt-cat-research  .lt-icon { color: #7A5EA8; border-color: color-mix(in srgb, #7A5EA8 42%, transparent); }
.lt-cat-utilities .lt-icon { color: #A8632C; border-color: color-mix(in srgb, #A8632C 42%, transparent); }
a.lt-cat-writing:hover   .lt-icon, a.lt-cat-writing:focus-visible   .lt-icon { background: #C8922E; color: #1c1407; border-color: #C8922E; }
a.lt-cat-markets:hover   .lt-icon, a.lt-cat-markets:focus-visible   .lt-icon { background: #287849; color: #fff; border-color: #287849; }
a.lt-cat-onchain:hover   .lt-icon, a.lt-cat-onchain:focus-visible   .lt-icon { background: #3E6CA8; color: #fff; border-color: #3E6CA8; }
a.lt-cat-research:hover  .lt-icon, a.lt-cat-research:focus-visible  .lt-icon { background: #7A5EA8; color: #fff; border-color: #7A5EA8; }
a.lt-cat-utilities:hover .lt-icon, a.lt-cat-utilities:focus-visible .lt-icon { background: #A8632C; color: #fff; border-color: #A8632C; }

@media (prefers-reduced-motion: reduce) {
    .lt-card, .lt-card::before, .lt-icon { transition: none; }
    a.lt-card:hover, a.lt-card:focus-visible { transform: none; }
    a.lt-card:hover .lt-icon, a.lt-card:focus-visible .lt-icon { transform: none; }
}

/* Category filter bar */
.lt-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.lt-filter-btn {
    font-family: Cinzel, serif; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px; cursor: pointer; background: transparent;
    border: 1px solid var(--line, rgba(42,36,24,0.28)); color: var(--ink2, #5C5238);
    display: inline-flex; align-items: center; gap: 7px; transition: background .2s, color .2s, border-color .2s;
}
.lt-filter-btn:hover { border-color: color-mix(in srgb, var(--gold, #C8922E) 50%, transparent); }
.lt-filter-btn.is-active { background: var(--ink, #2A2418); color: var(--bg, #EDE3C7); border-color: var(--ink, #2A2418); }
.lt-filter-btn[data-filter]:not([data-filter="all"])::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--ink3, #8A7E60);
}

/* Per-category colour (subtle parchment tint + accent + chip) */
.lt-card.lt-cat-writing  { background: color-mix(in srgb, #C8922E 10%, var(--plate, #E4D8B6)); box-shadow: inset 0 3px 0 color-mix(in srgb, #C8922E 45%, transparent); }
.lt-card.lt-cat-markets  { background: color-mix(in srgb, #287849 10%, var(--plate, #E4D8B6)); box-shadow: inset 0 3px 0 color-mix(in srgb, #287849 45%, transparent); }
.lt-card.lt-cat-onchain  { background: color-mix(in srgb, #3E6CA8 10%, var(--plate, #E4D8B6)); box-shadow: inset 0 3px 0 color-mix(in srgb, #3E6CA8 45%, transparent); }
.lt-card.lt-cat-research { background: color-mix(in srgb, #7A5EA8 10%, var(--plate, #E4D8B6)); box-shadow: inset 0 3px 0 color-mix(in srgb, #7A5EA8 45%, transparent); }
.lt-card.lt-cat-utilities{ background: color-mix(in srgb, #A8632C 10%, var(--plate, #E4D8B6)); box-shadow: inset 0 3px 0 color-mix(in srgb, #A8632C 45%, transparent); }

.lt-cat-writing  .lt-cat-chip { color: #8f6418; border-color: color-mix(in srgb, #C8922E 45%, transparent); background: color-mix(in srgb, #C8922E 12%, transparent); }
.lt-cat-markets  .lt-cat-chip { color: #20683f; border-color: color-mix(in srgb, #287849 45%, transparent); background: color-mix(in srgb, #287849 12%, transparent); }
.lt-cat-onchain  .lt-cat-chip { color: #355d92; border-color: color-mix(in srgb, #3E6CA8 45%, transparent); background: color-mix(in srgb, #3E6CA8 12%, transparent); }
.lt-cat-research .lt-cat-chip { color: #654d92; border-color: color-mix(in srgb, #7A5EA8 45%, transparent); background: color-mix(in srgb, #7A5EA8 12%, transparent); }
.lt-cat-utilities .lt-cat-chip { color: #8c5021; border-color: color-mix(in srgb, #A8632C 45%, transparent); background: color-mix(in srgb, #A8632C 12%, transparent); }

/* Filter button category dots + active fill */
.lt-filter-btn.lt-cat-writing::before  { background: #C8922E; }
.lt-filter-btn.lt-cat-markets::before  { background: #287849; }
.lt-filter-btn.lt-cat-onchain::before  { background: #3E6CA8; }
.lt-filter-btn.lt-cat-research::before { background: #7A5EA8; }
.lt-filter-btn.lt-cat-utilities::before{ background: #A8632C; }
.lt-filter-btn.lt-cat-writing.is-active  { background: #C8922E; border-color: #C8922E; color: #1c1407; }
.lt-filter-btn.lt-cat-markets.is-active  { background: #287849; border-color: #287849; color: #fff; }
.lt-filter-btn.lt-cat-onchain.is-active  { background: #3E6CA8; border-color: #3E6CA8; color: #fff; }
.lt-filter-btn.lt-cat-research.is-active { background: #7A5EA8; border-color: #7A5EA8; color: #fff; }
.lt-filter-btn.lt-cat-utilities.is-active{ background: #A8632C; border-color: #A8632C; color: #fff; }
.lt-filter-btn.is-active::before { background: currentColor; }

/* Dark mode: brighten category chip text so it stays legible on the dark tinted cards */
:root[data-theme="dark"] .lt-cat-writing   .lt-cat-chip { color: #E6B752; }
:root[data-theme="dark"] .lt-cat-markets   .lt-cat-chip { color: #5BB985; }
:root[data-theme="dark"] .lt-cat-onchain   .lt-cat-chip { color: #7AA8E0; }
:root[data-theme="dark"] .lt-cat-research  .lt-cat-chip { color: #B79BE0; }
:root[data-theme="dark"] .lt-cat-utilities .lt-cat-chip { color: #D8965E; }

/* Tool page header */
/* Two-column tool header: breadcrumb on top, title on the left, description filling the space to its right. */
/* min-height + centered content keeps the header the same size for every tool,
   so switching tools doesn't make the layout jump when a title/description is
   shorter or longer than the next. */
.lt-toolhead { max-width: 1180px; margin: 0 auto; padding: 40px 32px 0; display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 38px; align-items: center; align-content: center; min-height: 220px; }
.lt-breadcrumb { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-family: Cinzel, serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3, #8A7E60); margin-bottom: 22px; }
.lt-breadcrumb a { color: var(--gold, #C8922E); text-decoration: none; }
.lt-breadcrumb a:hover { text-decoration: underline; }
.lt-breadcrumb .lt-sep { opacity: .6; }
.lt-toolhead-row { grid-column: 1; display: flex; min-width: 0; align-items: center; gap: 18px; }
.lt-toolhead .lt-icon { width: 56px; height: 56px; }
.lt-toolhead .lt-icon svg { width: 26px; height: 26px; }
.lt-toolhead h1 { font-family: "EB Garamond", serif; font-weight: 500; font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.6px; line-height: 1; margin: 0; color: var(--ink, #2A2418); }
.lt-toolhead p { grid-column: 2; width: 100%; align-self: center; margin: 0; max-width: none; padding-left: 30px; border-left: 1px solid color-mix(in srgb, var(--gold, #C8922E) 32%, transparent); font-size: 17px; line-height: 1.55; color: var(--ink2, #5C5238); text-wrap: pretty; }
@media (max-width: 820px) {
    .lt-toolhead { grid-template-columns: 1fr; min-height: 0; }
    .lt-toolhead p { grid-column: 1; max-width: 70ch; margin-top: 16px; padding-left: 0; border-left: none; }
}

/* Tool switcher: jump straight to any other Lab tool. The row wraps so every tool stays visible (no
   scrollbar, no hidden overflow); sharp-cornered chips echo the engraved Chemist plates. */
.lt-switch { max-width: 1180px; margin: 26px auto 0; padding: 0 32px; }
.lt-switch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.lt-switch-label { font-family: Cinzel, serif; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3, #8A7E60); opacity: .85; }
.lt-switch-label:not(:first-child) { margin-left: 12px; }
.lt-switch-pill {
    white-space: nowrap; text-decoration: none; font-size: 13.5px; line-height: 1;
    padding: 8px 14px; border-radius: 2px; border: 1px solid var(--line, rgba(42,36,24,0.2));
    background: transparent; color: var(--ink2, #5C5238);
    transition: border-color .2s, color .2s, background .2s;
}
.lt-switch-pill:hover { border-color: color-mix(in srgb, var(--gold, #C8922E) 50%, transparent); color: var(--ink, #2A2418); background: color-mix(in srgb, var(--gold, #C8922E) 8%, transparent); }
.lt-switch-pill.is-active { background: var(--gold, #C8922E); border-color: var(--gold, #C8922E); color: #2A2418; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 10px -4px rgba(200,146,46,0.55); }
.lt-switch-pill.is-active:hover { background: var(--goldb, #E0A93A); border-color: var(--goldb, #E0A93A); color: #2A2418; }
.lt-switch-mobile-head { display: none; }

@media (max-width: 880px) {
    .lt-section, .lt-toolhead, .lt-switch { padding-left: 20px; padding-right: 20px; }
    .lt-grid { grid-template-columns: 1fr; }
}

/* On phones the Lab becomes a compact index: every tool is immediately
   discoverable in the page flow, with no long sideways shelf to traverse. */
@media (max-width: 760px) {
    .lt-hero { height: 250px !important; }
    .lt-hero > div:last-child { padding: 0 20px 28px !important; }
    .lt-hero h1 { font-size: clamp(38px, 12vw, 58px) !important; }

    .lt-section { padding-top: 18px; padding-bottom: 26px; }
    .lt-head { margin-bottom: 18px; }
    .lt-sub { display: none; }

    .lt-filter {
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 0 16px;
        padding: 0;
    }
    .lt-filter-btn { flex: 0 0 auto; }

    #dc-root .lt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row;
        gap: 10px;
        overflow: visible;
        padding: 0;
        margin: 0;
    }
    #dc-root .lt-card {
        min-height: 126px;
        gap: 9px;
        padding: 13px 12px 12px;
        border-radius: 3px;
    }
    .lt-card-top { gap: 7px; }
    .lt-icon { width: 36px; height: 36px; }
    .lt-icon svg { width: 18px; height: 18px; }
    .lt-status { font-size: 8px; letter-spacing: .1em; padding: 3px 6px; }
    .lt-card-title { font-size: 19px; line-height: 1.05; }
    .lt-card-desc { display: none; }
    .lt-card-foot { margin-top: auto; }
    .lt-cat-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; padding: 3px 6px; }
    .lt-open { display: none; }

    .lt-card.is-soon { opacity: .62; }
    .lt-card.is-soon .lt-open { display: none; }
    .lt-card.is-soon .lt-status { max-width: 66px; overflow: hidden; text-overflow: ellipsis; }

    @media (max-width: 350px) {
        #dc-root .lt-grid { grid-template-columns: 1fr !important; }
        #dc-root .lt-card { min-height: 112px; }
    }

    /* Detail pages use the same shelf metaphor as the Lab index. The active
       tool remains a clear anchor while the rest can be browsed with a thumb. */
    .lt-switch {
        margin-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .lt-switch-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 9px;
        color: var(--ink3, #8A7E60);
        font-family: Cinzel, serif;
        font-size: 9.5px;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .lt-switch-mobile-head span:last-child { color: var(--gold, #C8922E); }
    .lt-switch-row {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        margin-right: -20px;
        padding: 0 20px 10px 0;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .lt-switch-row::-webkit-scrollbar { display: none; }
    .lt-switch-label {
        flex: 0 0 auto;
        align-self: center;
        margin: 0 !important;
        padding: 0 4px 0 12px;
        border-left: 1px solid color-mix(in srgb, var(--gold, #C8922E) 38%, transparent);
        color: var(--gold, #C8922E);
        font-size: 9px;
        letter-spacing: .14em;
        white-space: nowrap;
    }
    .lt-switch-label:first-child {
        padding-left: 0;
        border-left: 0;
    }
    .lt-switch-pill {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 10px 14px;
        font-size: 12px;
        scroll-snap-align: start;
    }
}