/* Durable Skills page (/durableskills). Uses the site tokens from styles.css and theme.css. */
.ds-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 40px; }
.ds-filter__label { font-weight: 800; color: var(--ink-2); }
.ds-filter .chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin: 24px 0 8px; }
.ds-next { margin-top: 56px; }
.ds-card { display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: var(--radius); padding: 24px 22px; box-shadow: 0 6px 18px rgba(18, 34, 74, .08); border-top: 6px solid var(--green); scroll-margin-top: 96px; }
.ds-card--next { border-top-color: var(--orange); }
.ds-card__head { display: flex; align-items: center; gap: 14px; }
.ds-card__head img { width: 56px; height: 56px; flex: none; }
.ds-card h3 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 900; }
.ds-status { display: inline-block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.ds-status--now { background: #dcf3e9; color: #1d6b4a; }
.ds-status--next { background: #fff1d6; color: #7a5200; }
.ds-fw { margin: 0; color: var(--ink-2); font-size: .95rem; }
.ds-goals { display: grid; gap: 10px; }
.ds-goal { border-radius: 14px; padding: 12px 14px; background: var(--tint); }
.ds-goal p { margin: 4px 0 0; font-weight: 700; }
.ds-goal__age { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-text); }
.ds-goal--young .ds-goal__age { color: #5a2fc0; }
.ds-practice { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; }
.ds-practice span { font-weight: 800; color: var(--ink-2); }
.ds-link { padding: 5px 12px; border-radius: 999px; border: 2px solid var(--line); font-weight: 800; text-decoration: none; }
.ds-link:hover { border-color: var(--blue); }

.ds-how { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
.ds-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
@media (max-width: 760px) { .ds-how { grid-template-columns: 1fr; } .ds-grid { grid-template-columns: 1fr; } }

[data-theme="dark"] .ds-card { background: var(--surface); box-shadow: var(--shadow); }
[data-theme="dark"] .ds-status--now { background: rgba(76, 182, 138, .18); color: #7fdcb2; }
[data-theme="dark"] .ds-status--next { background: rgba(255, 176, 32, .16); color: #ffcf73; }
[data-theme="dark"] .ds-goal__age { color: #8ab4ff; }
[data-theme="dark"] .ds-goal--young .ds-goal__age { color: #c3b0ff; }