/* DET discovery surfaces. Task players keep their existing layout and states. */
.det-practice-container:not(.det-item-active) {
    --section-color: var(--det-primary);
    --section-tint: var(--det-primary-light);
    --section-border: var(--det-primary-border);
    --det-muted: #74796f;
    scroll-margin-top: var(--det-nav-height);
}
body.dark-mode .det-practice-container:not(.det-item-active) { --det-muted: #aab5a8; }
.det-practice-container:not(.det-item-active) .det-main-content {
    background: var(--det-bg);
    padding: 2.75rem clamp(1.5rem, 3.4vw, 4rem) 4rem;
}
.det-practice-container:not(.det-item-active) #det-content { max-width: 1160px; margin-inline: auto; }
.det-practice-container .det-mobile-tab[data-section] {
    --tab-color: var(--det-primary);
    --tab-tint: var(--det-primary-light);
}
.det-practice-sidebar { box-shadow: none; }
.det-sidebar-tabs { gap: .3rem; margin-top: 1.75rem; }
.det-sidebar-tab { border-radius: 8px; padding: .6rem .7rem; }
/* Keep the existing skill palette visible in both sidebar sizes. */
.det-sidebar-tab .det-tab-tile,
.det-collapsed-sidebar-tab .det-tab-tile { background: var(--tab-tint); box-shadow: none; color: var(--tab-color); }
.det-sidebar-tab.active { background: var(--tab-tint); }
.det-sidebar-tab.active .det-tab-tile,
.det-collapsed-sidebar-tab.active .det-tab-tile { background: var(--tab-color); color: #fff; box-shadow: none; }
body.dark-mode .det-sidebar-tab:not(.active) .det-tab-tile,
body.dark-mode .det-collapsed-sidebar-tab:not(.active) .det-tab-tile { color: color-mix(in srgb, var(--tab-color) 65%, white); opacity: 1; }
body.dark-mode .det-sidebar-tab:is(:hover, .active) { color: color-mix(in srgb, var(--tab-color) 65%, white); }
.det-tab-label { font-weight: 500; font-size: .8rem; }
.det-practice-container .det-home-hero,
body.dark-mode .det-practice-container .det-home-hero {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--det-text);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .67fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    padding: 0 0 2.65rem;
    overflow: visible;
}
.det-practice-container .det-home-hero::before,
.det-practice-container .det-home-hero::after { display: none; }
.det-practice-container .det-home-eyebrow {
    color: var(--det-primary) !important;
    font-size: .64rem;
    letter-spacing: .15em;
    font-weight: 600;
    margin-bottom: 1.1rem !important;
}
.det-practice-container .det-home-hero h1,
.det-practice-container .det-home-hero h1 em {
    color: var(--det-text);
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(2.65rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.025em;
}
.det-practice-container .det-home-hero h1 em { color: var(--det-primary); }
.det-practice-container .det-home-hero-copy > p:not(.det-home-eyebrow) {
    color: var(--det-text-secondary);
    font-size: .85rem;
    line-height: 1.8;
    max-width: 390px;
    margin-top: 1.1rem;
}
.det-home-explore { display: inline-flex; gap: .8rem; margin-top: 1.25rem; color: var(--det-primary); font-size: .73rem; font-weight: 500; text-decoration: none; }
.det-next-practice { background: #e7ece2; border: 1px solid #d8e0d1; border-radius: 14px; padding: 1.65rem; }
body.dark-mode .det-next-practice { background: #29352b; border-color: #3e4b3f; }
.det-next-eyebrow { display: block; color: var(--det-primary); text-transform: uppercase; font-size: .6rem; letter-spacing: .1em; font-weight: 600; }
.det-next-practice h2 { color: var(--det-text); font-size: 1.08rem; font-weight: 500; letter-spacing: -.03em; margin: .85rem 0 .6rem; }
.det-next-practice p { color: var(--det-text-secondary); font-size: .75rem; line-height: 1.8; margin: 0 0 1.1rem; }
.det-next-practice .det-btn { width: 100%; justify-content: space-between; padding: .85rem 1rem; border-radius: 8px; font-size: .75rem; box-shadow: none; font-weight: 500; min-height: 44px; }
.det-next-practice small { display: block; font-size: .6rem; color: var(--det-text-secondary); margin-top: .75rem; text-align: center; }
.det-practice-container .det-next-practice .det-btn-primary { background: var(--det-primary); color: #fff; }
body.dark-mode .det-practice-container .det-next-practice .det-btn-primary { background: var(--det-primary); color: #17271e; }
.det-next-practice svg, .det-skill-browse svg, .det-progress-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.det-skill-library { border-top: 1px solid var(--det-border); padding-top: 1.8rem; scroll-margin-top: 85px; }
.det-skill-library .det-content-header { align-items: end; margin-bottom: 1.2rem; }
.det-library-eyebrow { margin: 0 0 .45rem; text-transform: uppercase; letter-spacing: .12em; font-size: .6rem; color: var(--det-primary); font-weight: 500; }
.det-skill-library .det-content-header h2 { font-size: 1.1rem; font-weight: 500; margin: 0; letter-spacing: -.035em; }
.det-library-count { color: var(--det-muted); font-size: .67rem; white-space: nowrap; }
.det-library-count span { padding-inline: .35rem; }
.det-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.det-skill-card { border: 1px solid var(--det-border); border-radius: 12px; padding: 1.3rem 1.45rem 0; background: var(--det-card); display: flex; flex-direction: column; min-width: 0; transition: border-color .22s ease; }
.det-skill-heading, .det-skill-title { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.det-skill-icon { color: var(--det-primary); background: var(--det-primary-light); width: 39px; height: 39px; border-radius: 10px; display: grid; place-items: center; }
.det-skill-icon svg { height: 22px; width: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.det-skill-number { font-family: 'Instrument Serif', Georgia, serif; color: var(--det-primary); opacity: .5; font-size: 1.4rem; }
.det-skill-title { margin-top: .8rem; }
.det-skill-title h3 { font-size: 1.05rem; font-weight: 500; color: var(--det-text); letter-spacing: -.02em; margin: 0; }
.det-skill-title > span { font-size: .6rem; color: var(--det-muted); }
.det-skill-card > p { font-size: .72rem; line-height: 1.75; color: var(--det-muted); margin: .35rem 0 .85rem; }
.det-skill-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; margin-bottom: 1rem; flex: 1; align-content: start; }
.det-skill-tasks a { text-decoration: none; color: var(--det-text-secondary); display: flex; align-items: center; justify-content: space-between; gap: .3rem; font-size: .75rem; padding: .45rem 0; min-height: 38px; line-height: 1.6; }
.det-skill-tasks a > span { color: var(--det-primary); }
.det-skill-browse { color: var(--det-primary); font-size: .78rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; border-top: 1px solid var(--det-border); padding: .85rem 0; min-height: 45px; }
.det-home-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.det-home-extras > :only-child { grid-column: 1 / -1; }
.det-home-extras .det-free-starter, .det-mock-shortcut { margin: 0; border: 1px solid var(--det-border); background: transparent; border-radius: 12px; padding: 1.45rem; }
.det-home-extras h2 { font-size: 1rem; font-weight: 500; letter-spacing: -.02em; margin: .55rem 0; color: var(--det-text); }
.det-home-extras p { font-size: .72rem; color: var(--det-muted); line-height: 1.8; margin: 0; }
.det-home-extras small { font-size: .6rem; color: var(--det-muted); line-height: 1.7; }
.det-home-extras .det-pill { background: transparent; padding: 0; font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; }
.det-home-extras .det-actions { justify-content: flex-start; gap: .5rem; margin-top: .8rem; }
.det-home-extras .det-btn { min-height: 40px; padding: .55rem .8rem; font-size: .67rem; border-radius: 7px; box-shadow: none; }
.det-home-extras .det-btn-primary { background: var(--det-primary-light); color: var(--det-primary); border: 1px solid var(--det-primary-border); }
.det-home-extras .det-skill-browse { border: 0; margin-top: .8rem; justify-content: flex-start; }
.det-practice-container[data-active-section="home"] .det-usage-banner { background: transparent; border: 0; padding: 0; margin: 1.25rem 0 0; color: var(--det-muted); font-size: .66rem; }
.det-practice-container[data-active-section="home"] .det-progress-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 1rem; gap: 1rem; }
.det-progress-stat { border: 0; box-shadow: none; background: transparent; padding: .4rem 0; }
.det-progress-stat strong { font-size: 1.4rem; }
.det-progress-stat-link { text-decoration: none; border-radius: 3px; }
.det-progress-stat-link:hover span { color: var(--det-primary); text-decoration: underline; text-underline-offset: 4px; }
.det-progress-stat-link:focus-visible { outline: 2px solid var(--det-primary); outline-offset: 4px; }
.det-in-progress-group { margin-bottom: 1.5rem; }
.det-in-progress-group .det-content-header > span { color: var(--det-muted); font-size: .75rem; }
.det-progress-link { color: var(--det-primary); display: flex; align-items: center; justify-content: flex-end; gap: .5rem; font-size: .7rem; text-decoration: none; }
.det-practice-container:not(.det-item-active) .det-page-header { max-width: 1160px; margin-inline: auto; background: transparent; border: 0; box-shadow: none; padding: 0 0 1.5rem; border-radius: 0; }
.det-practice-container:not(.det-item-active) .det-page-header::before { display: none; }
.det-practice-container:not(.det-item-active) .det-page-header h1 { font-family: 'Instrument Serif', Georgia, serif; font-size: 2.8rem; font-weight: 400; }
.det-practice-container:not(.det-item-active) .det-page-header p { font-size: .8rem; color: var(--det-muted); }
.det-practice-container:not(.det-item-active) .det-header-card { display: none; }
.det-catalog.det-content-block { border-radius: 12px; box-shadow: none; padding: 1.5rem; }
.det-catalog .det-content-header { margin-bottom: 1.2rem; }
.det-catalog .det-content-header h2 { font-size: 1.1rem; font-weight: 500; letter-spacing: -.02em; }
.det-catalog .det-content-header p { font-size: .72rem; color: var(--det-muted); }
.det-catalog .det-content-header > .det-pill { display: none; }
.det-catalog .det-filter-row { gap: .45rem; margin-bottom: 1rem; }
.det-catalog .det-filter-chip { font-size: .75rem; min-height: 40px; padding: .5rem .75rem; border: 1px solid var(--det-border); background: transparent; border-radius: 7px; font-weight: 500; }
.det-catalog .det-filter-chip.active { background: var(--det-primary-light); border-color: var(--det-primary); color: var(--det-primary); }
.det-catalog-tools { display: flex; gap: .65rem; }
.det-catalog-search { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--det-border); border-radius: 8px; background: var(--det-bg); padding: 0 .8rem; flex: 1; min-width: 0; }
.det-catalog-search svg { height: 18px; width: 18px; fill: none; stroke: var(--det-muted); stroke-width: 1.7; flex-shrink: 0; }
.det-catalog-search input { width: 100%; padding: .75rem 0; outline: none; border: 0; color: var(--det-text); background: transparent; font-size: .75rem; min-height: 44px; }
.det-catalog-search input::placeholder { color: var(--det-muted); }
.det-catalog-search:focus-within { outline: 2px solid var(--det-primary); outline-offset: 2px; }
.det-catalog-select select { height: 100%; min-height: 44px; border: 1px solid var(--det-border); border-radius: 8px; background: var(--det-card); color: var(--det-text-secondary); font-size: .7rem; padding: .6rem .7rem; }
.det-catalog-results-header { display: flex; justify-content: space-between; align-items: center; color: var(--det-muted); font-size: .65rem; min-height: 48px; gap: 1rem; }
[data-det-clear-filters] { color: var(--det-primary); background: transparent; border: 0; text-decoration: underline; cursor: pointer; min-height: 40px; font-size: .67rem; }
.det-catalog .det-item-card { border-radius: 10px; box-shadow: none; padding: 1.15rem 1.25rem; gap: 1.25rem; }
.det-catalog .det-item-card::before { display: none; }
.det-catalog .det-item-card-title { font-size: 1rem; font-weight: 500; margin-top: .5rem; letter-spacing: -.025em; }
.det-catalog .det-item-card-description { font-size: .74rem; line-height: 1.75; }
.det-discovery-item-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--det-primary); font-size: .7rem; }
.det-discovery-item-meta span + span::before { content: '·'; margin-right: .8rem; color: var(--det-muted); }
.det-catalog .det-item-byline { font-size: .59rem; }
.det-catalog .det-item-card .det-btn { min-height: 44px; font-size: .75rem; font-weight: 500; padding: .7rem 1rem; border-radius: 7px; box-shadow: none; }
body.dark-mode .det-catalog .det-item-card:not(.is-locked) .det-btn-primary { color: #17271e; }
.det-catalog .det-item-card.is-locked .det-btn { background: var(--det-primary-light); color: var(--det-primary); border: 1px solid var(--det-primary-border); }
.det-practice-container :is(.det-home-explore, .det-skill-tasks a, .det-skill-browse, .det-progress-link, .det-next-practice button, .det-catalog select, [data-det-clear-filters]):focus-visible { outline: 2px solid var(--det-primary); outline-offset: 4px; border-radius: 3px; }
.det-practice-container .det-next-practice .det-btn:focus { outline-color: var(--det-primary); }
@media (hover: hover) and (pointer: fine) {
    .det-skill-card:hover { border-color: var(--det-primary); }
    .det-skill-tasks a:hover, .det-skill-browse:hover, .det-home-explore:hover { color: var(--det-primary-dark); text-decoration: underline; text-underline-offset: 4px; }
    .det-next-practice .det-btn:hover { filter: brightness(.94); }
}
@media (max-width: 1100px) {
    .det-practice-container .det-home-hero,
    body.dark-mode .det-practice-container .det-home-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 1.5rem; }
    .det-skill-tasks { grid-template-columns: 1fr; gap: 0; }
    .det-skill-title { align-items: start; flex-wrap: wrap; }
    .det-skill-card { padding-inline: 1.15rem; }
}
@media (max-width: 800px) {
    .det-practice-container:not(.det-item-active) .det-main-content { padding: 2rem 1.5rem 6rem; }
    .det-practice-container .det-home-hero,
    body.dark-mode .det-practice-container .det-home-hero { grid-template-columns: 1fr; gap: 1.4rem; }
    .det-practice-container .det-home-hero h1, .det-practice-container .det-home-hero h1 em { font-size: 3rem; }
    .det-practice-container .det-home-hero-copy > p:not(.det-home-eyebrow) { max-width: 420px; }
    .det-next-practice { padding: 1.35rem; }
    .det-next-practice .det-btn { max-width: 360px; }
    .det-next-practice small { text-align: left; }
    .det-home-extras { grid-template-columns: 1fr; }
    .det-library-count { display: none; }
}
@media (max-width: 520px) {
    .det-practice-container:not(.det-item-active) .det-main-content { padding: 1.7rem 1rem 6rem; }
    .det-practice-container .det-home-hero h1, .det-practice-container .det-home-hero h1 em { font-size: 2.85rem; }
    .det-skill-grid { grid-template-columns: 1fr; }
    .det-skill-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
    .det-skill-tasks a { min-height: 44px; }
    .det-catalog.det-content-block { padding: 1rem; }
    .det-catalog-tools { flex-direction: column; }
    .det-catalog-select select { width: 100%; }
    .det-catalog .det-item-card { padding: 1rem; }
    .det-practice-container[data-active-section="home"] .det-progress-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .det-home-extras .det-actions > * { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .det-skill-card { transition: none; } }