/* Fuel the Journey (templates/food). Same cards and colours as Pack Smart; laptop first, still usable by tap.
   Nothing is shown by colour alone: every state also has an icon or words. */
.fj-page { max-width: 1000px; margin: 0 auto; }
.fj-page.is-wide { max-width: 1320px; }
.fj-page h1 { font-size: 1.8rem; margin-bottom: .25rem; }
.fj-sub { color: #5b6470; margin-bottom: 1.25rem; }
.fj-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.fj-quote { border-left: 4px solid #002855; padding: .2rem 0 .2rem .9rem; color: #2b3440; font-size: 1.02rem; margin: 0 0 1rem; }
.fj-status { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.fj-badge { font-weight: 600; padding: .3rem .7rem; border-radius: 999px; background: #eef2f6; color: #334; }
.fj-badge.is-done { background: #e3f4e8; color: #1e6b34; }
.fj-badge.is-needed { background: #fff3dc; color: #7a4d00; }
.fj-tip { background: #f2f7fd; border-left: 4px solid #5b8fd1; padding: .6rem .9rem; border-radius: 6px; margin: .8rem 0; }
.fj-steps-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6470; margin-bottom: .2rem; }

.fj-lessons { list-style: none; padding: 0; margin: 0; }
.fj-lessons li { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-top: 1px solid #eef0f2; }
.fj-lessons li:first-child { border-top: 0; }
.fj-num { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #eef2f6; color: #334; }
.fj-lessons li.is-done .fj-num { background: #2ea043; color: #fff; }
.fj-lessons li.is-current .fj-num { background: #002855; color: #fff; }
.fj-lessons li.is-locked { opacity: .6; }
.fj-lesson-text { flex: 1 1 auto; min-width: 0; }
.fj-lesson-text strong { display: block; }
.fj-lesson-text small { color: #5b6470; }
.fj-state { display: block; font-size: .85rem; color: #5b6470; }

.fj-text h2 { font-size: 1.2rem; margin-top: 1.2rem; }
.fj-text h2:first-child { margin-top: 0; }
.fj-text p, .fj-text li { line-height: 1.55; }
.fj-text table { font-size: .92rem; }

/* the journey brief */
.fj-brief { background: #f7f9fb; border: 1px solid #e3e6ea; border-radius: 10px; padding: .8rem 1rem; margin-bottom: .9rem; }
.fj-brief h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.fj-brief ul { margin: 0; padding-left: 1.1rem; }
.fj-brief li { font-size: .93rem; }

/* the planner */
.fj-totals { position: sticky; top: 0; z-index: 5; background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: .55rem .8rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: .8rem; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.fj-total { display: flex; flex-direction: column; min-width: 8rem; }
.fj-total small { color: #5b6470; font-size: .78rem; }
.fj-total strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.fj-total .fj-total-sub { font-size: .76rem; }
.fj-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.fj-layout.is-locked { grid-template-columns: minmax(0, 1fr); }
.fj-library { border: 1px solid #e3e6ea; border-radius: 10px; padding: .7rem; background: #fbfcfd; position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); display: flex; flex-direction: column; }
.fj-lib-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .5rem; }
.fj-lib-tools .form-check { grid-column: 1 / -1; margin: 0; }
.fj-foods { overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding-right: .2rem; }
.fj-food { border: 1px solid #dfe3e8; border-radius: 10px; padding: .5rem .6rem; background: #fff; display: flex; gap: .6rem; align-items: flex-start; }
.fj-food[draggable="true"] { cursor: grab; }
.fj-icon { flex: 0 0 2.1rem; height: 2.1rem; border-radius: 8px; background: #eef2f6; color: #2b3e55; display: grid; place-items: center; }
.fj-icon.is-small { flex-basis: 1.7rem; height: 1.7rem; font-size: .8rem; }
.fj-food-body { flex: 1 1 auto; min-width: 0; }
.fj-food-name { font-weight: 600; font-size: .93rem; line-height: 1.25; }
.fj-food-meta { font-size: .78rem; color: #5b6470; }
.fj-food-desc { font-size: .78rem; color: #3d4652; margin-top: .1rem; }
.fj-add { white-space: nowrap; min-height: 2.3rem; }

.fj-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.fj-tabs button { border: 1px solid #c6ccd3; background: #fff; border-radius: 999px; padding: .35rem .85rem; min-height: 2.5rem; }
.fj-tabs button small { color: #5b6470; }
.fj-tabs button[aria-selected="true"] { background: #002855; color: #fff; border-color: #002855; }
.fj-tabs button[aria-selected="true"] small { color: #d6e0ec; }
.fj-slot { border: 1px solid #dfe3e8; border-radius: 10px; padding: .6rem .7rem; margin-bottom: .6rem; background: #fff; }
.fj-slot.is-optional { background: #fafbfc; border-style: dashed; }
.fj-slot.is-target { border: 2px solid #002855; }
.fj-slot.is-drop { box-shadow: 0 0 0 3px #5b8fd1; }
.fj-slot-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.fj-slot-head .btn { margin-left: auto; }
.fj-need { font-size: .85rem; color: #3d4652; font-variant-numeric: tabular-nums; }
.fj-slot-facts { font-size: .8rem; color: #5b6470; margin-top: .15rem; }
.fj-lines { list-style: none; padding: 0; margin: .4rem 0 0; }
.fj-lines li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-top: 1px solid #eef0f2; flex-wrap: wrap; }
.fj-line-name { flex: 1 1 12rem; min-width: 0; }
.fj-line-name strong { display: block; font-size: .9rem; font-weight: 600; }
.fj-line-name small { color: #5b6470; font-size: .78rem; }
.fj-serv { font-size: .85rem; color: #3d4652; }
.fj-carry { width: auto; max-width: 13rem; }
.fj-qty { display: inline-flex; align-items: center; border: 1px solid #c6ccd3; border-radius: 8px; overflow: hidden; }
.fj-qty button { width: 2.3rem; height: 2.3rem; border: 0; background: #fff; font-size: 1.05rem; }
.fj-qty button:focus-visible { outline: 3px solid #f5a524; outline-offset: -3px; }
.fj-qty span { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.fj-panel { border: 1px solid #e3e6ea; border-radius: 10px; padding: .8rem 1rem; margin-top: .8rem; background: #fff; }
.fj-canisters { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: .4rem 0 .6rem; }
.fj-canister { display: flex; align-items: center; gap: .6rem; }
.fj-canister span { display: flex; flex-direction: column; }
.fj-canister small { color: #5b6470; font-size: .78rem; }
.fj-loads { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.fj-load { border: 1px solid #e3e6ea; border-radius: 8px; padding: .45rem .6rem; font-size: .88rem; }
.fj-load strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fj-load .fj-bar { height: 6px; background: #dfe3e8; border-radius: 3px; overflow: hidden; margin-top: .3rem; display: block; }
.fj-load .fj-bar i { display: block; height: 100%; background: #6b7785; }
.fj-nav-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

/* results */
.fj-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.fj-score-big { font-size: 2.4rem; font-weight: 700; color: #002855; font-variant-numeric: tabular-nums; }
.fj-verdict { font-weight: 700; padding: .35rem .8rem; border-radius: 8px; }
.fj-verdict.is-pass { background: #e3f4e8; color: #1e6b34; }
.fj-verdict.is-fail { background: #fdecea; color: #7a1c13; }
.fj-dims { list-style: none; padding: 0; margin: .8rem 0 0; }
.fj-dims li { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr 3rem; gap: .6rem; align-items: center; padding: .25rem 0; font-size: .92rem; }
.fj-dims .fj-bar { height: 10px; background: #e6e9ed; border-radius: 5px; overflow: hidden; display: block; }
.fj-dims .fj-bar i { display: block; height: 100%; background: #002855; }
.fj-dims b { text-align: right; font-variant-numeric: tabular-nums; }
.fj-feedback { list-style: none; padding: 0; margin: 0; }
.fj-feedback li { display: flex; gap: .55rem; padding: .45rem 0; border-top: 1px solid #eef0f2; font-size: .95rem; }
.fj-feedback li:first-child { border-top: 0; }
.fj-feedback i { margin-top: .2rem; width: 1.1rem; text-align: center; }
.fj-feedback .is-critical i { color: #b42318; } .fj-feedback .is-warning i { color: #a15c00; }
.fj-feedback .is-good i { color: #1e7b34; } .fj-feedback .is-info i { color: #36618f; }
.fj-sev { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-right: .3rem; }
.fj-event { background: #fff8e6; border: 1px solid #f1d58a; border-radius: 10px; padding: .7rem .9rem; margin-top: .8rem; }
.fj-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-top: .8rem; }
.fj-figures div { border: 1px solid #eef0f2; border-radius: 8px; padding: .4rem .6rem; font-size: .85rem; color: #5b6470; }
.fj-figures strong { display: block; color: #1f2933; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* lesson practice */
.fj-practice { border: 2px solid #dfe7f1; }
.fj-streak { display: flex; align-items: center; gap: .35rem; margin: .4rem 0 .8rem; color: #5b6470; font-size: .9rem; }
.fj-dot { width: 14px; height: 14px; border-radius: 50%; background: #dfe3e8; border: 1px solid #c6ccd3; }
.fj-dot.is-on { background: #2ea043; border-color: #2ea043; }
.fj-answer { padding: .7rem .9rem; border-radius: 8px; margin: .6rem 0; }
.fj-answer.is-right { background: #e3f4e8; color: #1e4d2b; }
.fj-answer.is-wrong { background: #fdecea; color: #6b1c15; }
.fj-answer-lines { list-style: none; padding: 0; margin: .4rem 0 0; }
.fj-answer-lines li { padding: .3rem 0; border-top: 1px solid rgba(0,0,0,.06); font-size: .92rem; }
.fj-done { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #e3f4e8; border-radius: 8px; padding: .6rem .9rem; margin: .4rem 0; color: #1e4d2b; }
.fj-classify { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .5rem; }
.fj-choices { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.fj-choices .btn { font-size: .8rem; }
.fj-menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; }
.fj-menu-card { border: 1px solid #dfe3e8; border-radius: 10px; padding: .7rem .8rem; display: flex; gap: .6rem; align-items: flex-start; }
.fj-menu-card label { cursor: pointer; }
.fj-menu-card ul { padding-left: 1rem; margin: .3rem 0 0; font-size: .88rem; }
.fj-menu-card:has(input:checked) { border: 2px solid #002855; }
.fj-order { padding-left: 1.6rem; }
.fj-order li { display: flex; align-items: center; gap: .4rem; border: 1px solid #dfe3e8; border-radius: 8px; padding: .4rem .6rem; margin-bottom: .35rem; background: #fff; cursor: grab; }
.fj-order-text { flex: 1 1 auto; }

/* the completion page */
.fj-record { max-width: 640px; margin: 2rem auto; text-align: center; border: 2px solid #002855; border-radius: 14px; padding: 2rem 1.5rem; background: #fff; }
.fj-record h1 { font-size: 1.8rem; margin: .6rem 0; }
.fj-record-name { font-size: 1.4rem; font-weight: 600; }
.fj-record-note { font-size: .85rem; color: #5b6470; margin-top: 1rem; }
@media print { .fj-noprint, nav, header, footer { display: none !important; } .fj-record { border-color: #000; } }

@media (max-width: 900px) {
  .fj-layout { grid-template-columns: minmax(0, 1fr); }
  .fj-library { position: static; max-height: 26rem; }
  .fj-totals { position: static; }
}