/* ── Design tokens (scoped) ────────────────────────────────────────
       Maps the original calculator's `--yc-*` tokens to Yousuli brand
       colours so the imported markup keeps working without rewriting
       hundreds of selectors. */
    .fuel-plan-host {
      --yc-brand:        var(--ys-navy);
      --yc-brand-light:  #79aec8;
      --yc-brand-hover:  #1f1d3a;
      --yc-accent:       var(--wf-coral);
      --yc-accent-hover: #d6571f;

      --yc-green:        #2e7d32;
      --yc-green-bg:     #e8f5e9;
      --yc-yellow:       #b45309;
      --yc-yellow-bg:    #fff3e0;
      --yc-red:          #c62828;
      --yc-red-bg:       #ffebee;
      --yc-orange:       #c2410c;

      --yc-bg:           #ffffff;
      --yc-card-bg:      #ffffff;
      --yc-input-bg:     #ffffff;
      --yc-section-bg:   var(--ys-bg-soft);
      --yc-border:       var(--ys-line);
      --yc-border-input: var(--ys-line);

      --yc-text:         var(--ys-navy);
      --yc-text-light:   #555555;
      --yc-text-muted:   var(--ys-muted);

      --yc-radius-sm:  6px;
      --yc-radius:     8px;
      --yc-radius-lg:  12px;
      --yc-shadow:     0 1px 3px rgba(0, 0, 0, 0.08);
      --yc-shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.10);

      font-family: var(--ys-font-body);
      color: var(--ys-navy);
    }

    /* ── Layout ─────────────────────────────────────────────────────── */
    .fuel-plan-host .container { max-width: 1180px; margin: 0 auto; background: #fff; border-radius: var(--yc-radius-lg); box-shadow: var(--yc-shadow); padding: 14px; }
    .fuel-plan-host h1 { margin: 0 0 10px; text-align: center; }
    .fuel-plan-host .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
    .fuel-plan-host .card { background: #fff; border: 1px solid var(--ys-line); border-radius: var(--yc-radius-lg); padding: 12px; }
    .fuel-plan-host .col-3 { grid-column: span 3; min-width: 0; }
    .fuel-plan-host .col-4 { grid-column: span 4; min-width: 0; }
    .fuel-plan-host .col-5 { grid-column: span 5; min-width: 0; }
    .fuel-plan-host .col-6 { grid-column: span 6; min-width: 0; }
    .fuel-plan-host .col-8 { grid-column: span 8; min-width: 0; }
    .fuel-plan-host .col-12 { grid-column: span 12; min-width: 0; }
    @media (max-width: 1000px) {
      .fuel-plan-host .col-3,
      .fuel-plan-host .col-4,
      .fuel-plan-host .col-5,
      .fuel-plan-host .col-6,
      .fuel-plan-host .col-8 { grid-column: span 12; }
    }

    .fuel-plan-host label {
      display: block;
      font-family: var(--ys-font-display);
      text-transform: uppercase;
      letter-spacing: 0.10em;
      font-size: 0.7rem;
      color: var(--ys-navy);
      margin: 6px 0 4px;
    }
    .fuel-plan-host input[type="number"],
    .fuel-plan-host input[type="time"],
    .fuel-plan-host input[type="text"],
    .fuel-plan-host select {
      width: 100%;
      border: 1.5px solid var(--ys-line);
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 14px;
      font-family: var(--ys-font-body);
      background: #fff;
      color: var(--ys-navy);
      box-sizing: border-box;
    }
    .fuel-plan-host input:focus,
    .fuel-plan-host select:focus {
      outline: none;
      border-color: var(--wf-coral);
      box-shadow: 0 0 0 3px rgba(250, 119, 60, 0.18);
    }
    .fuel-plan-host input[type="checkbox"] { width: auto; transform: scale(1.05); margin-right: 6px; }

    .fuel-plan-host .row-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .fuel-plan-host .row-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .fuel-plan-host .row-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

    .fuel-plan-host .section-title {
      font-family: var(--ys-font-display);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ys-navy);
      font-weight: 700;
      font-size: 0.92rem;
      margin: 2px 0 10px;
      cursor: pointer;
      user-select: none;
      padding-bottom: 6px;
      border-bottom: 2px solid var(--wf-coral);
      display: inline-block;
    }
    .fuel-plan-host .section-title::after { content: ' \25BC'; font-size: 10px; color: var(--ys-muted); }
    .fuel-plan-host .card.collapsed .section-title::after { content: ' \25B6'; }
    .fuel-plan-host .card.collapsed > *:not(.section-title) { display: none; }

    .fuel-plan-host .muted { color: var(--ys-muted); font-size: 12px; margin: 2px 0; }
    .fuel-plan-host .summary {
      background: var(--ys-bg-soft);
      border: 1px solid var(--ys-line);
      border-radius: var(--yc-radius-lg);
      padding: 10px;
    }
    .fuel-plan-host .stat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 2px; }
    .fuel-plan-host .stat { grid-column: span 3; background: #fff; border: 1px solid var(--ys-line); border-radius: var(--yc-radius-lg); padding: 10px; }
    @media (max-width: 800px) { .fuel-plan-host .stat { grid-column: span 6; } }
    @media (max-width: 500px) { .fuel-plan-host .stat { grid-column: span 12; } }
    .fuel-plan-host .stat h4 {
      margin: 0 0 6px;
      font-family: var(--ys-font-display);
      text-transform: uppercase;
      letter-spacing: 0.10em;
      font-size: 0.7rem;
      color: var(--wf-coral);
    }
    .fuel-plan-host .stat p { margin: 2px 0; font-size: 13px; color: var(--ys-navy); }

    .fuel-plan-host .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .fuel-plan-host button {
      background: var(--wf-coral); color: #fff; border: 1.5px solid var(--wf-coral);
      border-radius: 6px; padding: 9px 16px; cursor: pointer;
      font-family: var(--ys-font-display); font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; font-size: 0.78rem;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .fuel-plan-host button:hover { background: var(--ys-navy); border-color: var(--ys-navy); }
    .fuel-plan-host button.secondary { background: #fff; color: var(--ys-navy); border-color: var(--ys-line); }
    .fuel-plan-host button.secondary:hover { border-color: var(--wf-coral); color: var(--wf-coral); }

    .fuel-plan-host table {
      width: 100%; border-collapse: collapse; margin-top: 10px;
      font-size: 13px; table-layout: fixed; background: #fff;
    }
    .fuel-plan-host th, .fuel-plan-host td {
      border: 1px solid var(--ys-line); padding: 7px 6px;
      text-align: center; word-wrap: break-word;
    }
    .fuel-plan-host th {
      background: var(--ys-bg-soft);
      font-family: var(--ys-font-display);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.7rem;
      color: var(--ys-navy);
    }

    .fuel-plan-host .seg-swim { background: #fff; }
    .fuel-plan-host .seg-bike { background: rgba(47, 45, 86, 0.06); }
    .fuel-plan-host .seg-run  { background: rgba(250, 119, 60, 0.10); }
    .fuel-plan-host .seg-trans { background: var(--ys-bg-soft); }
    .fuel-plan-host .seg-green { background: #e8f5e9; font-weight: 700; }
    .fuel-plan-host .deficit-warn { background: #fff3e0 !important; }
    .fuel-plan-host .deficit-bad { background: #ffebee !important; }

    .fuel-plan-host .note {
      font-size: 13px; color: var(--ys-navy);
      background: rgba(250, 119, 60, 0.08);
      border: 1px solid rgba(250, 119, 60, 0.30);
      border-left: 4px solid var(--wf-coral);
      padding: 12px 14px; border-radius: 8px;
    }
    .fuel-plan-host .note strong {
      display: block;
      font-family: var(--ys-font-display);
      text-transform: uppercase;
      letter-spacing: 0.10em;
      font-size: 0.74rem;
      color: var(--wf-coral);
      margin-bottom: 6px;
    }
    .fuel-plan-host fieldset {
      border: 1px dashed var(--ys-line);
      border-radius: var(--yc-radius-lg);
      padding: 10px;
    }
    .fuel-plan-host legend {
      font-family: var(--ys-font-display);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.7rem;
      color: var(--ys-navy);
      padding: 0 6px;
    }
    .fuel-plan-host .trans-head { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
    .fuel-plan-host .pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .fuel-plan-host .pair { display: grid; grid-template-columns: 1fr 64px; gap: 6px; align-items: center; }
    .fuel-plan-host .pair small { color: var(--ys-muted); font-size: 11px; grid-column: 1 / -1; margin-top: -2px; }

    /* Glycogen bars */
    .fuel-plan-host .glycogen-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
    .fuel-plan-host .glycogen-label { width: 130px; text-align: right; font-weight: 600; color: var(--ys-navy); }
    .fuel-plan-host .glycogen-bar { flex: 1; height: 22px; background: var(--ys-line); border-radius: 11px; overflow: hidden; position: relative; }
    .fuel-plan-host .glycogen-fill { height: 100%; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; min-width: 30px; transition: width 0.3s; }

    /* Timeline bars */
    .fuel-plan-host .tl-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 6px; align-items: center; margin: 3px 0; font-size: 12px; }
    .fuel-plan-host .tl-label { text-align: right; font-weight: 600; color: var(--ys-navy); }
    .fuel-plan-host .tl-bar { height: 18px; background: var(--ys-line); border-radius: 9px; overflow: hidden; }
    .fuel-plan-host .tl-fill { height: 100%; border-radius: 9px; transition: width 0.3s; }
    .fuel-plan-host .tl-head { font-weight: 600; color: var(--ys-muted); font-size: 11px; text-align: center; }

    /* Cheat sheet */
    .fuel-plan-host .cheat-seg {
      font-family: var(--ys-font-display);
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      margin: 10px 0 4px; padding: 5px 10px; border-radius: 6px; font-size: 0.82rem;
    }
    .fuel-plan-host .cheat-seg-bike { background: rgba(47, 45, 86, 0.10); color: var(--ys-navy); }
    .fuel-plan-host .cheat-seg-run { background: rgba(250, 119, 60, 0.14); color: #b8460a; }
    .fuel-plan-host .cheat-seg-trans { background: var(--ys-bg-soft); color: var(--ys-navy); }
    .fuel-plan-host .cheat-item {
      display: grid; grid-template-columns: 68px minmax(0, 1fr);
      gap: 10px; padding: 4px 10px; font-size: 13px; line-height: 1.4;
      align-items: start;
    }
    .fuel-plan-host .cheat-item > span { min-width: 0; word-break: break-word; overflow-wrap: anywhere; color: var(--ys-navy); }
    .fuel-plan-host .cheat-time { font-weight: 700; white-space: nowrap; color: var(--wf-coral); }

    /* Save/Load */
    .fuel-plan-host .save-load { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
    .fuel-plan-host .save-load input[type="text"] { width: 150px; }
    .fuel-plan-host .save-load select { width: 200px; }

    /* Tooltips */
    .fuel-plan-host .tip { position: relative; display: inline; font-size: 12px; color: var(--ys-muted); cursor: help; margin-left: 3px; }
    .fuel-plan-host .tip .tip-text {
      display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
      transform: translateX(-50%); background: var(--ys-navy); color: #fff;
      padding: 8px 10px; border-radius: 6px; font-size: 12px; width: 240px;
      z-index: 100; line-height: 1.4; font-weight: 400;
      box-shadow: var(--yc-shadow-lg); pointer-events: none;
      white-space: normal; text-transform: none; letter-spacing: 0;
    }
    .fuel-plan-host .tip:hover .tip-text, .fuel-plan-host .tip:focus .tip-text { display: block; }

    /* Scorecard */
    .fuel-plan-host .sc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
    @media (max-width: 800px) { .fuel-plan-host .sc-grid { grid-template-columns: repeat(2, 1fr); } }
    .fuel-plan-host .sc-item {
      background: var(--ys-bg-soft); border: 1px solid var(--ys-line);
      border-radius: 8px; padding: 10px; text-align: center;
    }
    .fuel-plan-host .sc-label {
      font-family: var(--ys-font-display); text-transform: uppercase;
      font-size: 0.66rem; letter-spacing: 0.10em; color: var(--ys-muted); font-weight: 600;
    }
    .fuel-plan-host .sc-val {
      font-size: 1.15rem; font-weight: 700; margin: 4px 0 2px;
      font-family: var(--ys-font-display); color: var(--ys-navy);
    }
    .fuel-plan-host .sc-sub { font-size: 11px; color: var(--ys-muted); }
    .fuel-plan-host .sc-bar { height: 6px; background: var(--ys-line); border-radius: 3px; margin-top: 4px; overflow: hidden; }
    .fuel-plan-host .sc-fill { height: 100%; border-radius: 3px; }

    /* Inventory */
    .fuel-plan-host .inv-grid { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
    .fuel-plan-host .inv-item { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--ys-line); }
    .fuel-plan-host .inv-ok { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
    .fuel-plan-host .inv-warn { background: #fff3e0; border-color: #b45309; color: #b45309; }
    .fuel-plan-host .inv-bad { background: #ffebee; border-color: #c62828; color: #c62828; }

    /* Warnings */
    .fuel-plan-host .warning {
      padding: 10px 14px; border-radius: 8px; margin-bottom: 8px;
      font-size: 13px; line-height: 1.45;
    }
    .fuel-plan-host .warning-red { background: #ffebee; border-left: 4px solid #c62828; color: #b71c1c; }
    .fuel-plan-host .warning-yellow { background: #fff3e0; border-left: 4px solid #b45309; color: #92400e; }
    .fuel-plan-host .warning-green { background: #e8f5e9; border-left: 4px solid #2e7d32; color: #1b5e20; }

    /* Mobile responsive table, SCREEN ONLY */
    @media screen and (max-width: 768px) {
      .fuel-plan-host #schedule thead { display: none; }
      .fuel-plan-host #schedule tbody tr { display: block; margin-bottom: 8px; border: 1px solid var(--ys-line); border-radius: 8px; padding: 8px; }
      .fuel-plan-host #schedule tbody td { display: flex; justify-content: space-between; border: none; padding: 3px 0; text-align: right; font-size: 13px; }
      .fuel-plan-host #schedule tbody td::before { content: attr(data-label); font-weight: 600; text-align: left; color: var(--ys-navy); }
      .fuel-plan-host #schedule tbody td:last-child { flex-direction: column; text-align: left; }
      .fuel-plan-host #schedule tbody td:last-child::before { margin-bottom: 2px; }
      .fuel-plan-host .trans-head { grid-template-columns: 1fr 1fr; }
      .fuel-plan-host .row-4col { grid-template-columns: 1fr 1fr; }
    }

    /* Print, Cheat Sheet + key visuals mode */
    @media print {
      body { padding: 0; background: #fff; }
      @page { margin: 12mm; size: A4; }
      .ys-site-header, .ys-site-footer, .wf-hero, .wf-section, .ys-cta-card { display: none !important; }
      .fuel-plan-host .container { box-shadow: none; padding: 0; max-width: none; }
      .fuel-plan-host .no-print, .fuel-plan-host .controls, .fuel-plan-host .save-load, .fuel-plan-host button { display: none !important; }
      .fuel-plan-host .card { border: none; page-break-inside: avoid; }
      .fuel-plan-host .card.collapsed > * { display: block !important; }
      .fuel-plan-host .section-title::after { display: none; }

      body.print-cheat-only h1 { display: none !important; }

      body.print-cheat-only .fuel-plan-host #cheatSheetCard { order: 1 !important; }
      body.print-cheat-only .fuel-plan-host #printHeader    { order: 0 !important; }
      body.print-cheat-only .fuel-plan-host #scorecardCard  { order: 2 !important; }
      body.print-cheat-only .fuel-plan-host #glycogenCard   { order: 3 !important; }
      body.print-cheat-only .fuel-plan-host #timelineCard   { order: 4 !important; }
      body.print-cheat-only .fuel-plan-host .card.printable { order: 5 !important; }

      body.print-cheat-only .fuel-plan-host .card { display: none !important; }
      body.print-cheat-only .fuel-plan-host #scorecardCard,
      body.print-cheat-only .fuel-plan-host #glycogenCard,
      body.print-cheat-only .fuel-plan-host #timelineCard,
      body.print-cheat-only .fuel-plan-host #cheatSheetCard { display: block !important; }

      body.print-cheat-only .fuel-plan-host #schedule thead { display: table-header-group !important; }
      body.print-cheat-only .fuel-plan-host #schedule tbody tr { display: table-row !important; margin: 0; padding: 0; border: none; }
      body.print-cheat-only .fuel-plan-host #schedule tbody td {
        display: table-cell !important; text-align: left; padding: 3px 6px;
        font-size: 11px; border: none;
      }
      body.print-cheat-only .fuel-plan-host #schedule tbody td::before { content: none !important; }
      body.print-cheat-only .fuel-plan-host #schedule tbody td:last-child { flex-direction: row; text-align: left; font-size: 10px; }

      body.print-cheat-only .fuel-plan-host .card.printable:not(.print-include-schedule) { display: none !important; }
      body.print-cheat-only .fuel-plan-host .card.printable.print-include-schedule { display: block !important; }

      body.print-cheat-only .fuel-plan-host #printHeader {
        display: block !important;
        grid-column: 1 / -1 !important;
        padding: 0 0 8px 0; margin: 0 0 10px 0;
        border-bottom: 2px solid #333;
      }

      body.print-cheat-only .fuel-plan-host #timelineChart,
      body.print-cheat-only .fuel-plan-host #timelineChart *,
      body.print-cheat-only .fuel-plan-host #glycogenChart,
      body.print-cheat-only .fuel-plan-host #glycogenChart * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }
      body.print-cheat-only .fuel-plan-host .tl-bar { background: #e5e7eb !important; border: 1px solid #cbd5e1 !important; }
      body.print-cheat-only .fuel-plan-host .glycogen-bar { background: #e5e7eb !important; border: 1px solid #cbd5e1 !important; }

      body.print-cheat-only .fuel-plan-host .card { margin: 0 0 10px 0 !important; padding: 0 !important; }
      body.print-cheat-only .fuel-plan-host .card .section-title { font-size: 13px !important; margin: 8px 0 4px 0 !important; }
      body.print-cheat-only .fuel-plan-host #scorecardCard { page-break-after: auto; }
      body.print-cheat-only .fuel-plan-host #cheatSheetCard { page-break-before: auto; page-break-inside: auto !important; }
      body.print-cheat-only .fuel-plan-host #cheatSheetCard .cheat-item,
      body.print-cheat-only .fuel-plan-host #cheatSheetCard .cheat-seg { page-break-inside: avoid; }

      body.print-cheat-only .fuel-plan-host #glycogenCard,
      body.print-cheat-only .fuel-plan-host #timelineCard { page-break-inside: avoid !important; break-inside: avoid-page !important; }
      body.print-cheat-only .fuel-plan-host .glycogen-row,
      body.print-cheat-only .fuel-plan-host .tl-row { page-break-inside: avoid !important; break-inside: avoid !important; font-size: 11px; }

      body.print-cheat-only .fuel-plan-host .cheat-item {
        grid-template-columns: 72px 1fr !important;
        gap: 12px !important;
        padding: 3px 6px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        page-break-inside: avoid;
      }
      body.print-cheat-only .fuel-plan-host .cheat-item > span:last-child { word-break: break-word; white-space: normal; overflow: visible; text-overflow: clip; }
      body.print-cheat-only .fuel-plan-host .cheat-seg { font-size: 13px !important; margin: 8px 0 4px !important; padding: 4px 8px !important; page-break-after: avoid; }
    }