/* AISim Lab – site layout. The simulations bring their own styles (vendor/aisim/styles.css). */
:root {
    --ink: #0f172a;
    --muted: #475569;
    --line: #e2e8f0;
    --bg: #f1f5f9;
    --card: #fff;
    --brand: #22707a;
    --brand-dark: #1d3557;
    --ok: #15803d;
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

a { color: var(--brand); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.wrap.wide { max-width: 1400px; }

/* Header */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-size: 1.2rem; }
.brand b { color: var(--brand); }
.brand-logo { width: 2.5rem; height: 2.5rem; }
.links img { width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-right: .25rem; }
.lang { display: flex; gap: .25rem; }
.lang a {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 .5rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .03em;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang a.active { background: #e7f3f4; color: var(--brand-dark); font-weight: 600; }

/* Home */
.hero { padding: 2rem 0 1rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0; letter-spacing: -.02em; }
.hero h1 span { color: var(--brand); }
.hero .tagline { font-size: 1.25rem; font-weight: 600; margin: .25rem 0 .75rem; }
.hero p { max-width: 46rem; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover, .card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, .08); border-color: #a9d5da; }
.card-icon { font-size: 2rem; }
.card h2 { font-size: 1.15rem; margin: .1rem 0; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; flex: 1; }
.level { align-self: flex-start; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; }
.level-1 { background: #dcfce7; color: #166534; }
.level-2 { background: #fef9c3; color: #854d0e; }
.level-3 { background: #fee2e2; color: #991b1b; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }
.go { color: var(--brand); font-weight: 600; }
.progress { display: flex; gap: .3rem; }
.progress i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--line); }
.progress i.on { background: var(--ok); }

.reset { text-align: right; margin: .5rem 0 0; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }

.teachers { margin-top: 2.5rem; padding: 1.5rem; background: #e7f3f4; border-radius: var(--radius); }
.teachers h2 { margin-top: 0; }
.teacher-links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn.small { padding: .25rem .6rem; font-size: .8rem; }

/* Lab */
.crumbs { margin: 0 0 .25rem; }
.crumbs a { text-decoration: none; }
#lab h1 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.sim-area { min-width: 0; }
.side { display: flex; flex-direction: column; gap: 1rem; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.panel h2 { font-size: 1rem; margin: 0 0 .6rem; }
.panel p { margin: 0 0 .6rem; color: var(--muted); font-size: .92rem; }

.challenges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.challenge { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: start; padding: .6rem; border-radius: 10px; border: 1px solid transparent; }
.challenge.active { border-color: #a9d5da; background: #f1f8f9; }
.challenge .badge {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--line);
    font-size: .8rem;
    font-weight: 700;
}
.challenge.done .badge { background: var(--ok); color: #fff; }
.challenge .text { font-size: .9rem; }
.challenge em { color: var(--ok); font-style: normal; font-weight: 600; }

.tools { display: flex; flex-direction: column; gap: .6rem; }
.tools summary { list-style: none; }
.tools summary::-webkit-details-marker { display: none; }
.tools .help { margin: .6rem 0 .4rem; }
.tools pre { margin: 0; padding: .6rem; background: var(--ink); color: #e2e8f0; border-radius: 8px; font-size: .78rem; white-space: pre-wrap; word-break: break-all; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translate(-50%, 150%);
    padding: .7rem 1.2rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: transform .25s, opacity .25s, visibility .25s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.note { margin: 0 0 .6rem; padding: .5rem .8rem; border-radius: 10px; background: #fef9c3; color: #713f12; font-size: .85rem; }
#sim, #challenges-panel { scroll-margin-top: 4.5rem; }

/* Phone: the active challenge as a bar at the bottom of the screen. */
.goal-bar { display: none; }
.empty { padding: 3rem 0; text-align: center; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--card); padding: 1.5rem 1.25rem; font-size: .85rem; color: var(--muted); text-align: center; }
.eu-logo { display: block; width: 240px; max-width: 70%; height: auto; margin: 0 auto; }
.disclaimer { max-width: 52rem; margin: .75rem auto; }
.links { margin: 0; }

@media (max-width: 900px) {
    .lab-grid { grid-template-columns: 1fr; }
    #lab { padding-bottom: 6rem; }
    #lab h1 { font-size: 1.35rem; }
    .goal-bar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: .6rem;
        align-items: center;
        position: fixed;
        left: .5rem;
        right: .5rem;
        bottom: calc(.5rem + env(safe-area-inset-bottom));
        z-index: 20;
        padding: .6rem .8rem;
        border: 1px solid #a9d5da;
        border-radius: var(--radius);
        background: rgba(241, 248, 249, .97);
        box-shadow: 0 6px 24px rgba(15, 23, 42, .18);
        color: var(--ink);
        font: inherit;
        font-size: .85rem;
        line-height: 1.35;
        text-align: left;
        cursor: pointer;
    }
    .goal-bar .badge {
        display: grid;
        place-items: center;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        font-weight: 700;
    }
    .goal-bar.done { border-color: #86efac; background: rgba(240, 253, 244, .97); }
    .goal-bar.done .badge { background: var(--ok); }
    .goal-bar b { display: block; font-size: .75rem; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .04em; }
    .goal-bar .count { font-weight: 700; color: var(--muted); }
    .toast { bottom: calc(6.5rem + env(safe-area-inset-bottom)); max-width: calc(100% - 2rem); padding: .55rem 1rem; font-size: .9rem; white-space: nowrap; }
    .btn { min-height: 2.75rem; }
    .btn.small { min-height: 2.5rem; padding: .3rem .8rem; }
}
@media (max-width: 480px) {
    .wrap { padding: 1rem .75rem 2.5rem; }
    .site-header { padding: .5rem .75rem; }
    .brand { font-size: 1.05rem; }
    .lang { gap: 0; }
    .lang a { min-width: 2.5rem; padding: 0 .3rem; }
    .hero { padding-top: 1rem; }
    .card { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .card, .toast { transition: none; }
}