.wsg-task-details-presentation {
    --wsg-task-card: color-mix(in srgb, var(--tb-surface, #fff) 93%, var(--tb-accent, #1687c8));
    --wsg-task-ink: var(--tb-ink, var(--tb-text, #10243b));
    --wsg-task-muted: var(--tb-text-secondary, color-mix(in srgb, var(--wsg-task-ink) 78%, transparent));
    --wsg-task-border: color-mix(in srgb, var(--wsg-task-ink) 18%, transparent);
    color: var(--wsg-task-ink);
    display: grid;
    gap: 0.65rem;
    width: 100%;
    max-width: none;
    margin: 0;
}

.wsg-task-details-hero,
.wsg-task-details-presentation .tool-entry {
    background: var(--wsg-task-card);
    border: 1px solid var(--wsg-task-border);
    border-radius: 14px;
    overflow: hidden;
}

.wsg-task-details-hero {
    isolation: isolate;
    padding: clamp(0.85rem, 2vw, 1.25rem);
    position: relative;
}

.wsg-task-details-hero::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--wsg-task-card) 94%, transparent), color-mix(in srgb, var(--wsg-task-card) 64%, transparent)), var(--wsg-task-cover) center / cover;
    content: '';
    inset: 0;
    opacity: var(--wsg-task-cover-opacity, .25);
    position: absolute;
    z-index: -1;
}

.wsg-task-details-presentation .task-header,
.wsg-task-details-presentation .title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.wsg-task-details-presentation .task-number {
    background: var(--tb-accent-soft, #dff3ff);
    border-radius: 999px;
    color: var(--tb-accent-strong, #075f96);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    text-transform: uppercase;
}

.wsg-task-details-presentation .task-flags { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; }
.wsg-task-details-presentation .task-flags svg { width: 32px; height: 24px; overflow: hidden; border: 1px solid var(--wsg-task-border); border-radius: 2px; box-shadow: 0 1px 3px rgba(2, 8, 23, .22); }
.wsg-task-details-presentation h1 { margin: 0.55rem 0 0.25rem; overflow-wrap: anywhere; }
.wsg-task-short-description { margin: 0 0 0.7rem; white-space: pre-wrap; }
.wsg-task-detail-list { display: grid; gap: 0.22rem; }
.wsg-task-detail-line { align-items: start; display: grid; gap: 0.4rem; grid-template-columns: 1.5rem minmax(7rem, auto) 1fr; }
.wsg-task-detail-line > span:last-child { overflow-wrap: anywhere; }
.wsg-task-detail-icon { line-height: 1.3; }
.wsg-task-credits { font-style: italic; margin: 0.7rem 0 0; }

.wsg-task-details-presentation .title {
    cursor: pointer;
    font-weight: 800;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tb-accent, #1687c8) 10%, var(--wsg-task-card)), var(--wsg-task-card));
}

.collapsible-title-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    font: inherit;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    text-align: left;
}
.wsg-task-details-presentation .collapsible-state-marker { margin-left: auto; }
.wsg-task-details-presentation .collapsible-state-marker::after { content: '−'; }
.wsg-task-details-presentation .collapsed .collapsible-state-marker::after { content: '+'; }
.wsg-task-details-presentation .collapsible-title-toggle:focus-visible { outline: 3px solid var(--tb-focus, #21a7e8); outline-offset: 3px; }
.wsg-task-details-presentation .content { border-top: 1px solid var(--wsg-task-border); padding: 0.65rem 0.85rem; overflow-wrap: anywhere; }
.wsg-task-details-presentation .content > :first-child { margin-top: 0; }
.wsg-task-details-presentation .content > :last-child { margin-bottom: 0; }
.wsg-task-waypoints { display: grid; gap: 0; }
.wsg-task-waypoint { display: grid; gap: .08rem; padding: .5rem .35rem; border-bottom: 1px solid var(--wsg-task-border); }
.wsg-task-waypoint:last-child { border-bottom: 0; }
.wsg-task-waypoint span { color: var(--wsg-task-muted); }
.wsg-task-simple-list { display: grid; gap: 0; }
.wsg-task-simple-list > div { padding: .45rem .35rem; border-bottom: 1px solid var(--wsg-task-border); }
.wsg-task-simple-list > div:last-child { border-bottom: 0; }
.wsg-task-bullet-list { display: grid; gap: .2rem; margin: 0; padding-left: 1.25rem; }
.wsg-task-wind-list,
.wsg-task-cloud-list { display: grid; gap: 0; margin: 0; }
.wsg-task-layer-row,
.wsg-task-cloud-row { min-width: 0; padding: .5rem .35rem; border-bottom: 1px solid var(--wsg-task-border); }
.wsg-task-layer-row:last-child,
.wsg-task-cloud-row:last-child { border-bottom: 0; }
.wsg-task-layer-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(7rem, 1fr); gap: .75rem; }
.wsg-task-layer-row dt,
.wsg-task-layer-row dd,
.wsg-task-cloud-row dt,
.wsg-task-cloud-row dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.wsg-task-layer-row dd { text-align: right; }
.wsg-task-layer-row.is-emphasized { margin-bottom: .15rem; padding-inline: .55rem; border-left: 3px solid var(--tb-accent, #1687c8); background: var(--tb-accent-soft, #dff3ff); font-weight: 800; }
.wsg-task-cloud-row { display: grid; gap: .05rem; }
.wsg-task-cloud-row dd { color: var(--wsg-task-muted); }
.wsg-task-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .55rem; }
.wsg-task-resource { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: .7rem; min-width: 0; min-height: 72px; padding: .6rem; border: 1px solid var(--wsg-task-border); border-radius: 12px; background: color-mix(in srgb, var(--wsg-task-card) 88%, var(--tb-accent, #1687c8)); color: inherit; font: inherit; text-align: left; }
button.wsg-task-resource { cursor: zoom-in; }
button.wsg-task-resource:hover,
button.wsg-task-resource:focus-visible { border-color: var(--tb-accent, #1687c8); background: var(--tb-accent-soft, #dff3ff); outline: none; }
.wsg-task-resource img { display: block; width: 92px; height: 62px; border-radius: 8px; background: #fff; object-fit: cover; }
.wsg-task-resource > span { display: grid; min-width: 0; gap: .2rem; }
.wsg-task-resource strong,
.wsg-task-resource small { overflow-wrap: anywhere; }
.wsg-task-resource small { color: color-mix(in srgb, var(--tb-ink, #10243b) 70%, transparent); }
.wsg-task-resource.is-unavailable { opacity: .68; }
.wsg-task-weather-graph-host { min-height: min(620px, 65vh); margin-top: 1rem; overflow: hidden; border: 1px solid var(--wsg-task-border); border-radius: 12px; background: #789; }
.wsg-task-weather-graph-host .tb-weather-graph-viewport { min-height: 520px; }
.wsg-task-loading-note { padding: 1rem; color: var(--tb-text-secondary, #52677e); }

@media (max-width: 540px) {
    .wsg-task-detail-line { grid-template-columns: 1.35rem 1fr; }
    .wsg-task-detail-line > span:last-child { grid-column: 2; }
    .wsg-task-resource-grid { grid-template-columns: 1fr; }
    .wsg-task-resource { grid-template-columns: 74px minmax(0, 1fr); }
    .wsg-task-resource img { width: 74px; height: 54px; }
    .wsg-task-weather-graph-host { min-height: 420px; }
    .wsg-task-weather-graph-host .tb-weather-graph-viewport { min-height: 360px; }
    .wsg-task-details-presentation .title { padding: .6rem .7rem; }
    .wsg-task-details-presentation .content { padding: .55rem .7rem; }
    .wsg-task-layer-row { grid-template-columns: 1fr; gap: .12rem; }
    .wsg-task-layer-row dd { text-align: left; }
}