/* Civil Society Resilience in the Age of AI (decision 0015). Builds on the trainings kit (.tr-*); own parts are .cr-*.
   Colours follow Marta's draft: lavender arch, lilac and gold-soft tiles, plum programme. Tokens only, Fixel only. */
@layer marta.tools {
  .cr-main { display: flex; flex-direction: column; }
  .cr-main > * { order: 50; }
  .cr-root [tabindex="-1"]:focus { outline: none; }
  .cr-root section { scroll-margin-top: 80px; }

  /* hero */
  .cr-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
  @media (min-width: 900px) { .cr-hero__grid { grid-template-columns: 1.15fr .85fr; } .cr-who { grid-column: 1 / -1; } }
  .cr-title { margin: 0; font: 900 clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem)/.98 var(--mb-font-display); letter-spacing: var(--mb-track-tight); text-wrap: balance; }
  .cr-title span { display: block; margin-top: .35em; font-size: .46em; font-weight: 750; line-height: 1.1; color: var(--mb-violet); letter-spacing: -.02em; }
  .cr-wave { display: block; width: min(320px, 70%); height: 18px; margin: 1rem 0 1.2rem; overflow: visible; }
  .cr-wave path { fill: none; stroke: var(--mb-thread); stroke-width: 3; stroke-linecap: round; }
  .cr-where { display: inline-block; margin: .4rem 0 0; padding: .35rem .9rem; border-radius: var(--mb-radius-pill); background: var(--mb-lilac); font-weight: 700; font-size: var(--mb-step--1); }
  .cr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
  .cr-stat { display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem 1.2rem; border-radius: var(--mb-radius-lg); background: var(--mb-lilac); min-height: 110px; }
  .cr-stat b { font: 900 var(--mb-step-3)/1 var(--mb-font-display); letter-spacing: var(--mb-track-tight); }
  .cr-stat span { font-weight: 650; font-size: var(--mb-step--1); }
  .cr-stat--0 { grid-column: 1 / -1; min-height: 190px; align-items: center; justify-content: center; text-align: center; border-radius: 999px 999px var(--mb-radius) var(--mb-radius); background: var(--mb-lavender); }
  .cr-stat--0 b { font-size: clamp(4rem, 3rem + 4vw, 6.5rem); }
  .cr-stat--1 { background: var(--mb-gold-soft); }
  /* Phones: the three numbers as one compact row, so "Who are you?" is reached without a long scroll. */
  @media (max-width: 899px) {
    .cr-stats { grid-template-columns: 1.2fr 1fr 1fr; gap: .5rem; }
    .cr-stat, .cr-stat--0 { grid-column: auto; min-height: 0; padding: .8rem .7rem; align-items: flex-start; justify-content: flex-end; text-align: left; }
    .cr-stat--0 { border-radius: 999px 999px var(--mb-radius) var(--mb-radius); align-items: center; text-align: center; }
    .cr-stat b, .cr-stat--0 b { font-size: var(--mb-step-2); }
  }
  .cr-who { margin: .5rem 0 0; padding: 0; border: 0; min-width: 0; }
  .cr-who legend { margin-bottom: .8rem; font: 800 var(--mb-step-1)/1.2 var(--mb-font-display); }
  .cr-who__roles { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .cr-who__roles input { position: absolute; opacity: 0; pointer-events: none; }
  .cr-role { position: relative; display: grid; gap: .2rem; padding: 1.1rem 1.3rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: inset 0 0 0 1.5px var(--mb-line); cursor: pointer;
    transition: transform var(--mb-dur-2) var(--mb-ease-out), box-shadow var(--mb-dur-2), background var(--mb-dur-2); }
  .cr-role b { font: 850 var(--mb-step-1)/1.1 var(--mb-font-display); }
  .cr-role span { font-size: var(--mb-step--1); color: var(--mb-ink-soft); }
  .cr-role .mb-knot { position: absolute; right: 1rem; top: 1rem; width: 1.4em; fill: none; stroke: var(--mb-thread); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity var(--mb-dur-2); }
  .cr-role:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--mb-ink); }
  .cr-who__roles input:checked + .cr-role { background: var(--mb-plum); color: #FFF1F6; box-shadow: none; }
  .cr-who__roles input:checked + .cr-role span { color: #F3DDEA; }
  .cr-who__roles input:checked + .cr-role .mb-knot { opacity: 1; stroke: var(--mb-pink); }
  .cr-who__roles input:focus-visible + .cr-role { outline: 3px solid var(--mb-thread); outline-offset: 3px; }
  .cr-hello { margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); border-left: 4px solid var(--mb-thread); }
  .cr-hello p { margin: 0; max-width: 70ch; }
  .cr-hello .tr-actions { margin: 1rem 0 0; }

  /* why */
  .cr-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .cr-why__i { padding: 1.4rem; border-radius: var(--mb-radius-lg); background: var(--mb-lilac); }
  .cr-why__i--1 { background: var(--mb-gold-soft); }
  .cr-why__i--2 { background: var(--mb-lavender); }
  .cr-why__i > span { font-weight: 800; font-size: var(--mb-step--1); }
  .cr-why__i h3 { margin: .5rem 0 .4rem; font: 800 var(--mb-step-1)/1.15 var(--mb-font-display); }
  .cr-why__i p { margin: 0; }

  /* modules: plum, like the draft's programme block */
  .cr-mods { background: var(--mb-plum); color: #FFF1F6; border-radius: var(--mb-radius-lg) var(--mb-radius-lg) 0 0; }
  .cr-mods .tr-kicker, .cr-mods .tr-sub { color: #E9D3E2; }
  .cr-mods .mb-chip { background: transparent; color: #FFF1F6; border-color: rgba(255, 241, 246, .45); }
  .cr-mods .ct-topics input:checked + label { background: var(--mb-lavender); border-color: var(--mb-lavender); color: var(--mb-plum); }
  .cr-field { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
  .cr-field legend { margin-bottom: .5rem; font-weight: 700; font-size: var(--mb-step--1); }
  .cr-map { position: relative; height: clamp(160px, 24vw, 240px); margin: 1.6rem .5rem 1rem; }
  .cr-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .cr-map__path { fill: none; stroke: var(--mb-thread); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  /* The thread is revealed left to right (a clip, since dashes cannot be used with a non-scaling stroke). */
  .tr-motion .cr-map svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--mb-ease-silk); }
  .tr-motion .cr-map.is-seen svg { clip-path: inset(0 0 0 0); }
  .cr-map__knots button { position: absolute; transform: translate(-50%, -50%); width: clamp(40px, 5.5vw, 56px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
    background: #4E1C41; color: #FFF1F6; font: 850 var(--mb-step-1)/1 var(--mb-font-display); box-shadow: 0 0 0 3px var(--mb-plum), 0 0 0 5px rgba(255, 241, 246, .35);
    transition: transform var(--mb-dur-2) var(--mb-ease-spring), background var(--mb-dur-2); }
  .cr-map__knots button:hover { transform: translate(-50%, -50%) scale(1.08); }
  .cr-map__knots button.is-core { background: var(--mb-lavender); color: var(--mb-plum); }
  .cr-map__knots button[aria-selected="true"] { background: var(--mb-thread); color: #fff; transform: translate(-50%, -50%) scale(1.15); }
  .cr-map__knots button:focus-visible { outline: 3px solid var(--mb-butter); outline-offset: 4px; }
  .cr-map__star { position: absolute; right: -6px; top: -8px; font-style: normal; font-size: .8rem; color: var(--mb-butter); opacity: 0; }
  .cr-map__knots button.is-marked .cr-map__star { opacity: 1; }
  .cr-mod { padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--mb-radius-lg); background: #4A1A3E; min-height: 15rem; }
  .cr-mod__n { font-size: var(--mb-step--1); color: #E9D3E2; }
  .cr-mod__n b { color: var(--mb-lavender); }
  .cr-mod h3 { margin: .4rem 0 .5rem; font: 850 var(--mb-step-2)/1.1 var(--mb-font-display); }
  .cr-mod p { margin: 0 0 .8rem; max-width: 70ch; }
  .cr-mod__q { padding: .8rem 1rem; border-radius: var(--mb-radius); background: rgba(198, 166, 255, .16); font-weight: 650; }
  .cr-mod__q span, .cr-mod__a > span { display: block; font-size: var(--mb-step--1); font-weight: 600; color: var(--mb-lavender); }
  .cr-anchor, .cr-root .cr-anchor:visited { display: inline-block; margin: .3rem .3rem 0 0; padding: .3rem .8rem; border-radius: var(--mb-radius-pill); background: var(--mb-gold-soft); color: var(--mb-plum); font-weight: 700; font-size: var(--mb-step--1); text-decoration: none; }
  .cr-anchor:hover { text-decoration: underline; }
  .cr-mods .mb-btn--ghost { --b-fg: #FFF1F6; color: #FFF1F6; border-color: rgba(255, 241, 246, .55); }
  .cr-mods__foot { margin: 1rem 0 0; font-size: var(--mb-step--1); color: #E9D3E2; }
  .cr-mods .mb-link { color: #FFF1F6; }

  /* crisis round */
  .cr-sim__card { padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); min-height: 18rem; }
  .cr-sim__clock { margin: 0; font: 900 var(--mb-step-4)/1 var(--mb-font-display); color: var(--mb-thread); letter-spacing: var(--mb-track-tight); }
  .cr-sim__scene { font-size: var(--mb-step-1); line-height: 1.4; }
  .cr-sim__k { margin: 0 0 .4rem; font-size: var(--mb-step--1); font-weight: 700; color: var(--mb-ink-soft); text-transform: uppercase; letter-spacing: .06em; }
  .cr-sim__q { margin: 0 0 1rem; font: 850 var(--mb-step-1)/1.2 var(--mb-font-display); }
  .cr-sim__opts { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
  .cr-opt { width: 100%; text-align: left; padding: .8rem 1rem; border-radius: var(--mb-radius); border: 1.5px solid var(--mb-line); background: var(--mb-paper); color: var(--mb-ink); font: 600 var(--mb-step-0)/1.35 var(--mb-font-text); cursor: pointer;
    transition: border-color var(--mb-dur-2), background var(--mb-dur-2), opacity var(--mb-dur-2); }
  .cr-opt:hover:not(:disabled) { border-color: var(--mb-ink); }
  .cr-opt:focus-visible { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .cr-opt:disabled { cursor: default; }
  .cr-opt.is-best { border-color: var(--mb-violet); background: var(--mb-lilac); }
  .cr-opt.is-picked { border-color: var(--mb-thread); }
  .cr-opt.is-dim { opacity: .55; }
  .cr-opt__best { display: block; margin-top: .3rem; font-size: var(--mb-step--1); font-weight: 800; color: var(--mb-violet); }
  .cr-sim__f { padding: .7rem 1rem; border-radius: var(--mb-radius); background: var(--mb-blush); }
  .cr-sim__f--best { background: var(--mb-lilac); }
  .cr-sim__score { font: 900 var(--mb-step-3)/1 var(--mb-font-display); margin: 0 0 .6rem; }
  .cr-sim__role { font-weight: 650; }

  /* planner */
  .cr-plan__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  @media (min-width: 960px) { .cr-plan__grid { grid-template-columns: 1fr 1fr; } .cr-sheet { position: sticky; top: 96px; } }
  .cr-fmts { display: grid; gap: .5rem; }
  .cr-fmts input { position: absolute; opacity: 0; pointer-events: none; }
  .cr-fmt { display: grid; gap: .15rem; padding: .9rem 1.1rem; border-radius: var(--mb-radius); background: var(--mb-surface); box-shadow: inset 0 0 0 1.5px var(--mb-line); cursor: pointer; }
  .cr-fmt b { font: 800 var(--mb-step-0)/1.2 var(--mb-font-display); }
  .cr-fmt span { font-size: var(--mb-step--1); color: var(--mb-ink-soft); }
  .cr-fmts input:checked + .cr-fmt { background: var(--mb-lavender); box-shadow: inset 0 0 0 2px var(--mb-plum); }
  .cr-fmts input:checked + .cr-fmt span { color: var(--mb-plum); }
  .cr-fmts input:focus-visible + .cr-fmt { outline: 3px solid var(--mb-thread); outline-offset: 2px; }
  .cr-plan select { width: 100%; min-height: 44px; padding: .5rem .8rem; border-radius: var(--mb-radius); border: 1.5px solid var(--mb-line); background: var(--mb-surface); font: inherit; color: inherit; }
  .cr-sheet { padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); border-top: 6px solid var(--mb-lavender); }
  .cr-sheet__k { margin: 0; font-size: var(--mb-step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mb-ink-soft); }
  .cr-sheet h3 { margin: .3rem 0 1rem; font: 850 var(--mb-step-1)/1.15 var(--mb-font-display); }
  .cr-sheet__rows { margin: 0 0 1rem; display: grid; gap: 0; }
  .cr-sheet__rows div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--mb-line); }
  .cr-sheet__rows dt { font-weight: 700; color: var(--mb-ink-soft); font-size: var(--mb-step--1); }
  .cr-sheet__rows dd { margin: 0; }
  @media (max-width: 520px) { .cr-sheet__rows div { grid-template-columns: 1fr; gap: .1rem; } }
  .cr-sheet__actions, .cr-letter__actions, .cr-sim__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }

  /* ask your university */
  .cr-ask { background: var(--mb-gold-soft); }
  .cr-letter { padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .cr-letter__k { margin: 0; font-size: var(--mb-step--1); font-weight: 700; color: var(--mb-ink-soft); text-transform: uppercase; letter-spacing: .08em; }
  .cr-letter__s { margin: .4rem 0 .6rem; }
  .cr-letter__b { margin: 0 0 1rem; padding: 1rem; border-radius: var(--mb-radius); background: var(--mb-paper); white-space: pre-wrap; font: 400 var(--mb-step--1)/1.55 var(--mb-font-text); max-height: 22rem; overflow: auto; }

  /* lecturer, places */
  .cr-lect__card { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(1.4rem, 4vw, 2.6rem); border-radius: var(--mb-radius-lg); background: var(--mb-lilac); }
  @media (min-width: 860px) { .cr-lect__card { grid-template-columns: .7fr 1.3fr; } }
  .cr-lect__img { width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--mb-radius) var(--mb-radius); justify-self: center; }
  .cr-lect__role { margin: -.4rem 0 .6rem; font-weight: 700; }
  .cr-places { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .cr-place { padding: 1.4rem; border-radius: var(--mb-radius-lg); background: var(--mb-surface); box-shadow: inset 0 0 0 1.5px var(--mb-line); }
  .cr-place > span { font-size: var(--mb-step--1); font-weight: 700; }
  .cr-place h3 { margin: .3rem 0 .3rem; font: 800 var(--mb-step-1)/1.15 var(--mb-font-display); }
  .cr-place p { margin: 0 0 .8rem; }
  .cr-place--next { background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--mb-plum) 35%, transparent); }

  @media (prefers-reduced-motion: reduce) {
    .cr-role, .cr-map__knots button, .cr-opt { transition: none; }
  }
}