/* Guides « feature » du carnet d'Amiens (2 octobre 2026) : modules interactifs,
   vidéos, encarts logement. Chargé uniquement sur les articles feature. */

.feature-article .article-body { --tool-bg: #edf1e8; --tool-line: #cfdbce; --tool-ink: #173431; --accent: #a46727; }

/* L'essentiel */
.feature-keyfacts { margin: 34px 0 10px; padding: clamp(22px, 4vw, 34px); color: var(--white); background: var(--deep); border-radius: 4px; position: relative; overflow: hidden; }
.feature-keyfacts::after { content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border: 1px solid rgba(220, 232, 219, .14); border-radius: 50%; box-shadow: 0 0 0 28px rgba(220, 232, 219, .04); pointer-events: none; }
.article-body .feature-keyfacts h2 { margin: 0 0 16px; padding: 0; color: var(--white); font-size: clamp(25px, 3vw, 32px); }
.article-body .feature-keyfacts h2::before { display: none; }
.feature-countdown { display: inline-block; margin: 0 0 20px !important; padding: 8px 14px; color: var(--deep); background: #f3d9c6; border-radius: 999px; font-family: var(--font-body); font-size: 14px; font-weight: 650; line-height: 1.45; }
.feature-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; margin: 0; padding: 0; list-style: none; font-family: var(--font-body); }
.feature-facts li { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid rgba(220, 232, 219, .22); }
.feature-facts strong { color: #d7b69d; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.feature-facts span { color: #edf3ec; font-size: 15.5px; line-height: 1.5; }

/* Tableau des horaires : ligne du jour */
.article-body tr.is-today td { background: #f6e7d6; }
.article-body tr.is-today td:first-child::after { content: " · aujourd’hui"; color: #8a4f25; font-weight: 650; }
.feature-hours-status { margin-top: -18px !important; font-family: var(--font-body); font-size: 14px; color: #6b4a2b; }
.feature-hours-status:empty { display: none; }

/* Outils */
.feature-tool { margin: 34px 0; padding: clamp(22px, 4vw, 36px); color: var(--tool-ink); background: var(--tool-bg); border: 1px solid var(--tool-line); border-radius: 4px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.article-body .feature-tool h3 { margin: 8px 0 16px; color: var(--ink); font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.feature-tool p { margin: 0 0 14px; }
.feature-tool fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.feature-tool legend { margin-bottom: 10px; font-weight: 650; }
.feature-tool fieldset label { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 9px 14px; background: #fffaf0; border: 1px solid #c9d6c8; border-radius: 999px; cursor: pointer; line-height: 1.35; }
.feature-tool fieldset label:has(input:checked) { background: #d8e5d3; border-color: #315e4b; }
.feature-tool fieldset input { accent-color: #315e4b; width: 18px; height: 18px; margin: 0; flex: none; }
.feature-result { padding: 16px 18px; border-left: 3px solid var(--accent); background: #fffaf0; overflow-wrap: anywhere; }
.feature-small { margin: 12px 0 0 !important; color: #52665b; font-size: 13px; }
.feature-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; margin-bottom: 20px; }
.feature-controls select { width: 100%; min-height: 44px; padding: 8px 10px; color: #163d36; background: #fffdf7; border: 1px solid currentColor; border-radius: 6px; font: inherit; }
.feature-tool :focus-visible, .idea-finder :focus-visible, .route-steps + .stepper-controls :focus-visible { outline: 3px solid #9b6529; outline-offset: 3px; }

/* Frise horaire */
.feature-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.feature-timeline li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px dashed #b9caba; }
.feature-timeline li:last-child { border-bottom: 0; }
.feature-timeline time { align-self: start; padding: 3px 8px; color: var(--white); background: var(--deep); border-radius: 3px; font-size: 13px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }

/* Parcours pas à pas */
.route-steps { margin: 26px 0 8px; padding: 0; list-style: none; counter-reset: route; font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.route-steps li { counter-increment: route; position: relative; margin: 0 0 12px; padding: 16px 18px 16px 62px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
.route-steps li::before { content: counter(route); position: absolute; left: 16px; top: 15px; display: grid; place-items: center; width: 32px; height: 32px; color: var(--white); background: var(--clay); border-radius: 50%; font-weight: 700; }
.route-steps.is-enhanced li { min-height: 96px; margin-bottom: 0; }
.stepper-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 10px 0 30px; font-family: var(--font-body); }
.stepper-controls button { min-height: 44px; padding: 0 14px; color: var(--deep); background: transparent; border: 1px solid var(--deep); border-radius: 3px; cursor: pointer; font-size: 13px; font-weight: 650; }
.stepper-controls button:disabled { opacity: .35; cursor: default; }
.stepper-count { margin: 0 !important; text-align: center; color: var(--ink-soft); font-size: 13px; }
.stepper-progress { grid-column: 1 / -1; height: 4px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.stepper-progress span { display: block; height: 100%; background: var(--clay); transition: width .25s ease; }

/* Quiz */
.quiz-question { padding: 14px 0; border-top: 1px solid #b9caba; }
.quiz-label { font-weight: 650; margin-bottom: 10px !important; }
.quiz-options { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-options button { min-height: 42px; padding: 0 15px; color: var(--deep); background: #fffaf0; border: 1px solid #b9caba; border-radius: 999px; cursor: pointer; font-size: 15px; }
.quiz-options button:hover:not(:disabled) { border-color: var(--deep); }
.quiz-options button:disabled { cursor: default; }
.quiz-options button.is-correct { color: var(--white); background: #315e4b; border-color: #315e4b; }
.quiz-options button.is-wrong { color: #7a2f1d; background: #f4dcd3; border-color: #c27b63; text-decoration: line-through; }
.quiz-feedback { margin: 10px 0 0 !important; font-size: 15px; }
.quiz-feedback:empty { display: none; }
.quiz-score { margin-top: 12px !important; font-weight: 650; }
.quiz-score:empty { display: none; }
.quiz-answers { margin-top: 12px; font-size: 14px; }
.quiz-answers summary { cursor: pointer; }
[data-quiz][data-enhanced] .quiz-answers { opacity: .8; }

/* Liste de préparation */
.feature-check { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; padding: 11px 12px; background: #fffaf0; border-radius: 3px; cursor: pointer; line-height: 1.5; }
.feature-check input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: #315e4b; }
.feature-check:has(input:checked) { background: #d8e5d3; }
.feature-check input:checked + span { text-decoration: line-through; text-decoration-color: #557761; }
.feature-check-status { margin-top: 14px !important; font-weight: 650; }
.feature-reset { cursor: pointer; min-height: 44px; border: 1px solid #315e4b; color: #fffaf0; background: #315e4b; border-radius: 3px; padding: 0 17px; font-size: 14px; }
[data-feature-checklist]:not([data-enhanced]) .feature-reset, [data-feature-checklist]:not([data-enhanced]) .feature-check-status { display: none; }
[data-feature-checklist].is-complete .feature-check-status { color: #315e4b; }

/* Vidéos */
.feature-video { width: min(100%, 760px); margin: 36px auto 42px; }
.feature-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #10241f; border-radius: 3px; }
.feature-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.feature-video figcaption { display: grid; gap: 4px; margin-top: 10px; color: #41574a; font-family: var(--font-body); font-size: 13px; line-height: 1.55; }
.feature-video-caption { color: var(--ink-soft); }
.feature-video a { color: #3f6d5d; }

/* Encarts logement */
.lodging-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); margin: 44px 0; overflow: hidden; color: var(--white); background: var(--deep); border-radius: 4px; font-family: var(--font-body); }
.lodging-cta-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; gap: 3px; min-height: 100%; background: #0f2622; }
.lodging-cta-photo { margin: 0; overflow: hidden; }
.lodging-cta-photo:first-child { grid-column: 1 / -1; }
.lodging-cta-photo img { width: 100%; height: 100%; object-fit: cover; }
.lodging-cta-copy { padding: clamp(24px, 4vw, 38px); }
.lodging-cta .eyebrow { color: #d7b69d; }
.article-body .lodging-cta-copy p.lodging-cta-title { margin: 10px 0 12px; color: var(--white); font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -.03em; line-height: 1.12; }
.article-body .lodging-cta-copy p { margin: 0 0 14px; color: #dce8db; font-size: 16px; line-height: 1.65; }
.lodging-cta ul { display: grid; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; color: #edf3ec; font-size: 14.5px; line-height: 1.5; }
.lodging-cta li { position: relative; padding-left: 20px; }
.lodging-cta li::before { content: "✳"; position: absolute; left: 0; color: #d7b69d; font-size: 12px; top: 2px; }
.article-body a.lodging-cta-button { color: var(--deep); background: var(--white); border-color: var(--white); text-decoration: none; }
.article-body a.lodging-cta-button:hover { color: var(--white); background: transparent; }
.article-body .lodging-cta-note { margin: 12px 0 0 !important; color: rgba(220, 232, 219, .65) !important; font-size: 12px !important; }
.lodging-cta--compact { grid-template-columns: 220px minmax(0, 1fr); }
.lodging-cta--compact .lodging-cta-photos { display: block; }
.lodging-cta--compact .lodging-cta-photo, .lodging-cta--compact .lodging-cta-photo img { height: 100%; min-height: 210px; }
.article-body .lodging-cta--compact p.lodging-cta-title { font-size: clamp(23px, 2.6vw, 28px); }

/* Trouveur d'idées */
.idea-finder { margin: 30px 0 40px; font-family: var(--font-body); }
.idea-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.idea-filters[hidden] { display: none; }
.idea-filters button { min-height: 40px; padding: 0 14px; color: var(--deep); background: var(--white); border: 1px solid #b9caba; border-radius: 999px; cursor: pointer; font-size: 14px; }
.idea-filters button[aria-pressed="true"] { color: var(--white); background: var(--deep); border-color: var(--deep); }
.idea-filters button[aria-pressed="true"]::before { content: "✓ "; }
.idea-filters .idea-reset { border-style: dashed; }
.idea-count { margin: 0 0 16px !important; color: var(--ink-soft); font-size: 14px; font-weight: 650; }
.idea-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: idea; }
.idea-card { counter-increment: idea; position: relative; display: flex; flex-direction: column; padding: 18px 18px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
.idea-card[hidden] { display: none; }
.article-body .idea-card h3 { margin: 0 0 8px; padding-right: 34px; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 400; letter-spacing: -.015em; line-height: 1.25; }
.idea-card::after { content: counter(idea); position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 26px; height: 26px; color: var(--clay); border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 700; }
.article-body .idea-card p { margin: 0 0 10px; color: #354b43; font-size: 15px; line-height: 1.6; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; }
.idea-meta span { padding: 3px 9px; color: var(--moss); background: var(--mist); border-radius: 999px; font-size: 12px !important; font-weight: 600; }

/* Onglets */
.tab-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid #b9caba; }
.tab-list[hidden] { display: none; }
.tab-list [role=tab] { min-height: 44px; padding: 0 14px; color: var(--ink-soft); background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; font-size: 14px; font-weight: 650; }
.tab-list [role=tab][aria-selected="true"] { color: var(--deep); border-bottom-color: var(--clay); }
.feature-tabs.is-enhanced .tab-panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab-panel p { margin: 0; }
.feature-tabs:not(.is-enhanced) .tab-panel + .tab-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid #b9caba; }

/* Quiz de profil */
.profile-results { display: grid; gap: 12px; margin: 6px 0 16px; }
.profile-result { padding: 16px 18px; background: #fffaf0; border-left: 3px solid #315e4b; border-radius: 2px; }
.profile-result[hidden] { display: none; }
.article-body .profile-result h3 { margin: 0 0 6px; font-size: 22px; }
.profile-result p { margin: 0; }

/* Bandeau de réservation */
.sticky-cta { position: fixed; left: 50%; bottom: 14px; z-index: 50; display: flex; align-items: center; gap: 14px; width: min(calc(100% - 24px), 760px); padding: 10px 10px 10px 18px; color: var(--white); background: rgba(23, 52, 49, .97); border-radius: 6px; box-shadow: 0 10px 30px rgba(10, 30, 26, .28); transform: translateX(-50%); font-family: var(--font-body); }
.sticky-cta[hidden] { display: none; }
.sticky-cta p { flex: 1; margin: 0; font-size: 14px; line-height: 1.4; }
.sticky-cta .button { flex: none; min-height: 42px; padding: 0 14px; }
.sticky-cta-close { flex: none; width: 36px; height: 36px; color: #dce8db; background: transparent; border: 1px solid rgba(220, 232, 219, .3); border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; }

@media (max-width: 800px) {
  .lodging-cta, .lodging-cta--compact { grid-template-columns: 1fr; }
  .lodging-cta-photos { grid-template-rows: 220px 130px; }
  .lodging-cta--compact .lodging-cta-photo, .lodging-cta--compact .lodging-cta-photo img { min-height: 200px; max-height: 240px; }
  .idea-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .feature-facts { grid-template-columns: 1fr; }
  .feature-controls { grid-template-columns: 1fr; }
  .feature-timeline li { grid-template-columns: 66px minmax(0, 1fr); gap: 10px; }
  .stepper-controls { grid-template-columns: 1fr 1fr; }
  .stepper-count { grid-column: 1 / -1; grid-row: 1; }
  .route-steps li { padding-left: 56px; }
  .sticky-cta { gap: 8px; padding-left: 12px; }
  .sticky-cta p { font-size: 12.5px; }
  .sticky-cta .button { padding: 0 10px; font-size: 11px; gap: 6px; }
  .lodging-cta-photos { grid-template-rows: 190px 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .stepper-progress span { transition: none; }
}
@media print {
  .sticky-cta, .stepper-controls, .idea-filters, .tab-list { display: none !important; }
}

/* f2-modules (feature articles week-end-deconnexion-pres-paris, que-faire-autour-amiens) */
/* Feature articles of October 2026: interactive modules (scoped .f2-*). */
.f2-tool{--f2-ink:#173431;--f2-soft:#405b53;--f2-card:#fffaf0;--f2-line:#c9d7c8;--f2-accent:#315e4b;--f2-warm:#a46727;
  margin:40px 0;padding:clamp(20px,4vw,40px);color:var(--f2-ink);background:linear-gradient(160deg,#eef3ea 0%,#f6f1e4 100%);
  border:1px solid var(--f2-line);border-radius:6px;box-shadow:0 18px 40px -32px rgba(23,52,49,.55)}
.article-body .f2-tool h3{margin:8px 0 14px;font-family:var(--font-display,Georgia,serif);font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.02em}
.f2-tool p{font-size:16px;line-height:1.65}
.f2-tool [hidden]{display:none!important}
.f2-tool .f2-small{margin:16px 0 0;font-size:13px;color:#4e6358}
.f2-tool :focus-visible{outline:3px solid var(--f2-warm);outline-offset:3px}
.f2-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid var(--f2-accent);border-radius:3px;
  color:#fffaf0;background:var(--f2-accent);font:inherit;font-size:14px;font-weight:650;letter-spacing:.02em;cursor:pointer;transition:transform .2s ease,background .2s ease}
.f2-btn:hover{background:#244a3b;transform:translateY(-1px)}
.f2-btn--ghost{color:var(--f2-accent);background:transparent}
.f2-btn--ghost:hover{color:#fffaf0}
.f2-time{display:inline-block;min-width:4.6em;font-variant-numeric:tabular-nums;font-weight:700;color:var(--f2-accent)}

/* Quiz */
.f2-quiz-form{display:grid;gap:14px;margin:18px 0}
@media (min-width:1000px){.f2-quiz-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.f2-question{margin:0;padding:14px 16px 10px;border:1px solid var(--f2-line);border-radius:5px;background:var(--f2-card);transition:border-color .2s ease}
.f2-question.is-done{border-color:#86a98f}
.f2-question legend{display:flex;gap:10px;align-items:flex-start;padding:0 6px;font-weight:650;line-height:1.4}
.f2-qnum{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#fffaf0;background:var(--f2-accent);font-size:13px}
.f2-option{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:4px;cursor:pointer;line-height:1.45}
.f2-option:hover{background:#eef3ea}
.f2-option input{flex:0 0 18px;width:18px;height:18px;margin-top:3px;accent-color:var(--f2-accent)}
.f2-option:has(input:checked){background:#dfeadb;font-weight:600}
.f2-quiz-result{padding:18px 20px;border-left:4px solid var(--f2-warm);background:var(--f2-card);border-radius:0 5px 5px 0}
.f2-quiz-result p{margin:0 0 8px}
.f2-quiz-score{font-weight:700}
.f2-meter{height:10px;margin:6px 0 12px;border-radius:5px;background:#e3e8df;overflow:hidden}
.f2-meter span{display:block;height:100%;background:linear-gradient(90deg,#7fa88a,#a46727);transition:width .5s ease}
.f2-quiz-key{margin-top:14px}
.f2-quiz-key summary,.f2-draw-all summary{cursor:pointer;font-weight:600;padding:6px 0}
.f2-quiz-key ul{margin:8px 0 0;padding-left:20px}
.f2-quiz-key li{margin:6px 0;font-size:15px}

/* Calculator */
.f2-calc-controls{display:grid;gap:8px;margin:12px 0 18px}
.f2-calc-controls label{font-weight:600}
.f2-range{display:flex;align-items:center;gap:18px}
.f2-range input,.f2-finder-controls input[type=range],.f2-planner input[type=range]{width:100%;min-width:0;accent-color:var(--f2-accent);cursor:pointer}
.f2-range output{min-width:3.4em;font-size:24px;font-variant-numeric:tabular-nums;text-align:right}
.f2-tool select,.f2-tool input[type=time]{box-sizing:border-box;width:100%;max-width:100%;min-height:44px;padding:.55rem .7rem;border:1px solid #8aa596;border-radius:5px;background:#fffdf7;color:var(--f2-ink);font:inherit}
.f2-calc-result{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:center;padding:18px;background:var(--f2-card);border-radius:5px}
.f2-big{margin:0;font-family:var(--font-display,Georgia,serif);font-size:clamp(46px,7vw,68px);line-height:1;color:var(--f2-accent)}
.f2-big small{display:block;margin-top:6px;font-family:var(--font-body,sans-serif);font-size:14px;color:var(--f2-soft)}
.f2-equiv{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.f2-equiv li{padding:10px 12px;border:1px solid var(--f2-line);border-radius:4px;background:#fff;line-height:1.4}
.f2-equiv strong{font-size:20px;color:var(--f2-warm);font-variant-numeric:tabular-nums}

/* Timeline tabs */
.f2-tablist{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px;padding:5px;border-radius:40px;background:#e2eadf}
.f2-tablist [role=tab]{flex:1 1 auto;min-height:44px;padding:0 16px;border:0;border-radius:40px;background:transparent;color:var(--f2-ink);font:inherit;font-weight:650;cursor:pointer}
.f2-tablist [role=tab][aria-selected=true]{color:#fffaf0;background:var(--f2-accent)}
.f2-panel h4{margin:22px 0 10px;font-size:18px}
.f2-timeline.is-tabbed .f2-panel h4{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f2-steps{position:relative;margin:0;padding:0 0 0 22px;list-style:none}
.f2-steps::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:#b8cbb9}
.f2-steps li{position:relative;display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:10px;padding:10px 0}
.f2-steps li::before{content:"";position:absolute;left:-21px;top:17px;width:12px;height:12px;border-radius:50%;background:#fffaf0;border:3px solid var(--f2-accent)}
.f2-steps strong{display:block;line-height:1.35}
.f2-steps p{margin:4px 0 0;font-size:15px;color:#2f4a43}
.f2-steps a{color:var(--f2-accent);font-weight:600}

/* Random draw */
.f2-draw-card{display:grid;gap:16px;justify-items:start;padding:22px;border-radius:6px;background:var(--f2-card);border:1px dashed #9db5a2}
.f2-draw-idea{margin:0;font-family:var(--font-display,Georgia,serif);font-size:clamp(20px,2.6vw,26px);line-height:1.35}
.f2-draw.is-flip .f2-draw-idea{animation:f2-pop .35s ease-out}
.f2-draw-all{margin-top:14px}
.f2-draw-all ol{margin:8px 0 0;padding-left:22px}
.f2-draw-all li{margin:5px 0;font-size:15px}

/* Checklist */
.f2-progress{height:10px;border-radius:5px;background:#e1e8de;overflow:hidden}
.f2-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#7fa88a,#315e4b);transition:width .35s ease}
.f2-status{font-weight:650}
.f2-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 16px}
.f2-checkitem{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:4px;background:var(--f2-card);cursor:pointer;line-height:1.45}
.f2-checkitem input{flex:0 0 20px;width:20px;height:20px;margin-top:2px;accent-color:var(--f2-accent)}
.f2-checkitem:has(input:checked){background:#d9e6d4}
.f2-checkitem input:checked+span{text-decoration:line-through;text-decoration-color:#56775f}

/* Escapade finder */
.f2-finder-controls{display:grid;gap:10px;margin:8px 0 18px}
.f2-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.f2-chips legend{width:100%;margin-bottom:6px;font-weight:650}
.f2-chip{position:relative;display:inline-flex}
.f2-chip input{position:absolute;opacity:0;width:1px;height:1px}
.f2-chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid #8aa596;border-radius:40px;background:#fffdf7;cursor:pointer;font-size:14px;font-weight:600}
.f2-chip input:checked+span{color:#fffaf0;background:var(--f2-accent);border-color:var(--f2-accent)}
.f2-chip input:focus-visible+span{outline:3px solid var(--f2-warm);outline-offset:2px}
.f2-chip--train{justify-self:start}
.f2-finder-controls>label{font-weight:650}
.f2-finder-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.f2-map-wrap{position:sticky;top:16px;margin:0}
.f2-map{width:100%;height:auto;border-radius:50%;background:radial-gradient(circle,#fbf8ef 0%,#e9efe5 100%)}
.f2-map-wrap figcaption{margin-top:8px;font-size:12px;color:#4e6358;text-align:center}
.f2-ring{fill:none;stroke:#b7c9b8;stroke-dasharray:3 4}
.f2-ring-label,.f2-north{font-size:9px;fill:#6b8072;font-family:var(--font-body,sans-serif)}
.f2-north{text-anchor:middle;font-weight:700}
.f2-origin circle{fill:#bb7458}
.f2-origin text{font-size:11px;font-weight:700;fill:#173431;font-family:var(--font-body,sans-serif)}
.f2-dot circle{fill:#315e4b;stroke:#fffaf0;stroke-width:2;transition:opacity .25s ease,r .2s ease}
.f2-dot text{font-size:8.5px;fill:#173431;font-family:var(--font-body,sans-serif);paint-order:stroke;stroke:#fbf8ef;stroke-width:3px;transition:opacity .25s ease}
.f2-dot.is-dim circle,.f2-dot.is-dim text{opacity:.14}
.f2-dot.is-hot circle{fill:#a46727;r:9}
.f2-dot--near text{opacity:0}
.f2-dot--near.is-hot text{opacity:1}
.f2-dot.is-hot text{font-weight:700}
.f2-finder-list{display:grid;gap:8px;margin:0;padding:0 6px 0 0;list-style:none;max-height:600px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-bottom:1px solid var(--f2-line)}
.f2-finder-list:focus-visible{outline:3px solid var(--f2-warm);outline-offset:3px}
.f2-finder-list li{display:grid;gap:2px;padding:11px 14px;border:1px solid var(--f2-line);border-radius:5px;background:var(--f2-card);transition:border-color .2s ease}
.f2-finder-list li:hover,.f2-finder-list li:focus-within{border-color:var(--f2-accent)}
.f2-finder-list a{color:var(--f2-ink);text-decoration:none}
.f2-finder-list a:hover strong{text-decoration:underline}
.f2-meta{font-size:13px;font-weight:700;color:var(--f2-warm);font-variant-numeric:tabular-nums}
.f2-line{font-size:14px;line-height:1.45}
.f2-tags{font-size:12px;color:#5b6f63}

/* Planner */
.f2-planner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:10px 0 18px}
.f2-planner-grid>label{display:grid;gap:6px;font-weight:650}
.f2-inline{display:flex!important;gap:10px;align-items:center;font-weight:600}
.f2-inline input{width:20px;height:20px;accent-color:var(--f2-accent)}
.f2-plan-result{display:grid;gap:0;margin:0;padding:6px 18px;list-style:none;background:var(--f2-card);border-radius:5px}
.f2-plan-result li{padding:10px 0;border-bottom:1px solid #e4e9e0;line-height:1.45}
.f2-plan-result li:last-child{border-bottom:0;font-weight:700}

@keyframes f2-pop{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .f2-calc-result,.f2-finder-grid,.f2-planner-grid,.f2-checklist{grid-template-columns:1fr}
  .f2-finder-list{max-height:520px}
  .f2-map-wrap{position:static;max-width:340px;margin-inline:auto}
}
@media (max-width:420px){.f2-steps li{grid-template-columns:1fr;gap:2px}.f2-tablist [role=tab]{padding:0 10px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.f2-tool *,.f2-tool *::before,.f2-tool *::after{animation:none!important;transition:none!important}}