.jn-learning-tools[hidden] { display: none; }
.jn-learning-tools input {
    width: min(100%, 18rem);
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--control-radius);
    color: var(--ink);
    background: var(--glass-strong);
    font: inherit;
}
.jn-learning-tools input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.jn-tool { margin: 1.5em 0; padding: clamp(20px, 3vw, 28px); border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); font-size: 1rem; line-height: 1.5; }
.jn-tool__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: var(--md-sys-typescale-title-large); font-weight: 600; }
.jn-tool__title .jn-seal { font-size: 18px; }
.jn-tool__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
.jn-tool__row .jn-search-field { flex: 1 1 200px; }
.jn-timeline { margin: 1.5em 0; }
.jn-timeline ol { margin: 0; padding: 0 0 0 20px; list-style: none; border-left: 2px solid var(--md-sys-color-outline-variant); }
.jn-timeline li { position: relative; margin: 0 0 20px; padding-left: 8px; }
.jn-timeline li::before { content: ""; position: absolute; left: -28px; top: 6px; width: 12px; height: 12px; border-radius: 3px; background: var(--md-sys-color-primary); transform: rotate(45deg); }
.jn-timeline__date { display: block; color: var(--md-sys-color-primary); font: var(--md-sys-typescale-label-large); }
.jn-timeline p { margin: 2px 0 0; }