/* css/components/suggest_modals.css — suggest modal + blocked modal styles.
   Lifted verbatim from fragra_ui.html lines 3588-3672. Loaded by
   base.html so /create can show the suggest flow modals when
   the prompt yields note recommendations. */

    /* Suggest */
    .suggest-item{
      border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;
      margin-bottom:8px;background:var(--bg);
      transition:border-color .15s, background .15s;
    }
    .suggest-item:hover{border-color:var(--line2);background:rgba(245,240,232,0.5)}
    /* Multi-bundle palette — same scheme as .tip-card so users carry one
       mental model across the /suggest modal and the result-modal Try
       Adding section. */
    .suggest-item.in-bundle{padding-left:13px}
    .suggest-item.alt-direction{border-left:3px solid #d6b691;padding-left:13px}
    .suggest-item.in-bundle[data-bundle-slot="A"]{border-left:3px solid #a3c2a3}
    .suggest-item.in-bundle[data-bundle-slot="B"]{border-left:3px solid #8db3c2}
    .suggest-item.in-bundle[data-bundle-slot="C"]{border-left:3px solid #b89ac2}
    .suggest-item.in-bundle[data-bundle-slot="D"]{border-left:3px solid #c2a875}
    .suggest-group-tag{
      display:inline-block;
      font-family:var(--font-display, Georgia, serif);
      font-size:9.5px;font-weight:700;letter-spacing:1.6px;
      text-transform:uppercase;
      padding:2px 7px;border-radius:999px;
      margin-left:8px;vertical-align:middle;
      background:rgba(0,0,0,0.04);
      border:1px solid currentColor;
      opacity:0.92;
    }
    .suggest-item.in-bundle[data-bundle-slot="A"] .suggest-group-tag{color:#5a8a5a}
    .suggest-item.in-bundle[data-bundle-slot="B"] .suggest-group-tag{color:#4a7585}
    .suggest-item.in-bundle[data-bundle-slot="C"] .suggest-group-tag{color:#7a5a8a}
    .suggest-item.in-bundle[data-bundle-slot="D"] .suggest-group-tag{color:#9a7a3a}
    .suggest-item label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:14px}
    .suggest-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);cursor:pointer}
    .suggest-why{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4;padding-left:28px}
    .suggest-bundle{
      display:inline-flex;align-items:center;gap:6px;
      font-size:11px;font-weight:600;letter-spacing:0.2px;
      padding:5px 10px;border-radius:999px;margin-top:8px;margin-left:28px;
      background:#eef3eb;color:#3a6248;border:1px solid #d2e1d2;
      cursor:pointer;transition:background .15s,border-color .15s,transform .1s;
      user-select:none;
    }
    .suggest-bundle:hover{background:#dceadc;border-color:#a3c2a3}
    .suggest-bundle:active{transform:scale(0.97)}
    .suggest-bundle .bundle-icon{font-size:13px;line-height:1}
    .suggest-bundle.alt{
      background:#fbeee2;color:#7a4a1f;border-color:#e8d4b9;
      cursor:default;
    }
    .suggest-bundle.alt:hover{background:#fbeee2;border-color:#e8d4b9}
    .suggest-bundle-label{font-size:11px;color:var(--ink2);margin-top:4px;margin-left:28px;line-height:1.4;font-style:italic}
    .suggest-why-toggle{
      display:inline-flex;align-items:center;gap:4px;margin-left:28px;margin-top:6px;
      font-size:11px;font-weight:600;color:var(--ink2);
      background:none;border:none;padding:4px 0;cursor:pointer;letter-spacing:0.3px;
    }
    .suggest-why-toggle:hover{color:var(--ink)}
    .suggest-why-toggle .chev{transition:transform .15s;display:inline-block}
    .suggest-why-toggle.open .chev{transform:rotate(90deg)}
    .suggest-why-detail{
      margin:8px 0 0 28px;padding:12px 14px;
      background:var(--accent-soft, #f5f0e8);border-radius:10px;
      font-size:12px;color:var(--ink2);line-height:1.55;
      display:none;
    }
    .suggest-why-detail.open{display:block}
    .suggest-why-detail .why-section{margin-bottom:8px}
    .suggest-why-detail .why-section:last-child{margin-bottom:0}
    .suggest-why-detail .why-label{
      font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;
      color:var(--muted);margin-bottom:4px;
    }
    .suggest-why-detail .why-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
    .suggest-why-detail .why-stat{
      display:inline-flex;align-items:baseline;gap:4px;
      padding:3px 8px;background:white;border:1px solid var(--line);border-radius:8px;
      font-size:11px;font-weight:600;color:var(--ink);
    }
    .suggest-why-detail .why-stat .why-stat-label{font-weight:500;color:var(--muted)}
    .suggest-why-detail .why-examples{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
    .suggest-why-detail .why-ex-chip{
      padding:3px 9px;background:white;border:1px solid var(--line);
      border-radius:10px;font-size:11px;color:var(--ink2);
    }
    .suggest-why-detail .why-ex-chip b{color:var(--ink);font-weight:600}