/* ════════════════════════════════════════════════════════════════════════
   PHASE 9 — ADAPTIVE VENDOR INFERENCE: VISUAL DISTINCTION
   ════════════════════════════════════════════════════════════════════════
   Surface "from your history" (per-account) suggestions distinctly from
   "from static rules" suggestions. Critical on tablet/touch devices: the
   title tooltip never shows up there, so the chef can't read the reason
   text on hover — the visual treatment has to carry the meaning.

   Two cues, stacked:
     - Dashed border (visible at a distance, even on a 10" screen)
     - ↻ glyph prefix (semantic — "learned through repetition")

   Kind background colors are preserved so the chef still sees WHAT
   category is being suggested. The dashed border + glyph signals WHY
   the suggestion came up — chef's own pattern vs global heuristic.

   Builds on:
     - shared.css                tokens (--accent-strong)
     - phase4.css                .sa-suggestion-pill (base + kind variants)
     - phase8.css                .sa-bulk-strip-suggest (vendor strip)

   Owns:
     - .sa-suggestion-pill-learned                  modifier class
     - .sa-bulk-strip-suggest-learned               modifier on vendor strip
     - hover-none media query overrides for touch
   ════════════════════════════════════════════════════════════════════════ */


/* ── Learned-suggestion pill ──────────────────────────────────────────
   Stacks with the kind class (sa-suggestion-pill-retail/ingredient/
   operational). Dashed border + ↻ glyph + lightened background so the
   border stays visible against the fill. */

.sa-suggestion-pill-learned {
    border-style: dashed;
    border-width: 1.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

    .sa-suggestion-pill-learned::before {
        content: "↻";
        margin-right: 0.25rem;
        opacity: 0.85;
    }


    /* ── Per-kind background lightening ───────────────────────────────────
   Each kind's solid fill is too dense for a dashed border to read
   clearly against. Lift the background a notch (lighter shade of the
   same hue) and use the kind's stronger color for the border. */

    .sa-suggestion-pill-learned.sa-suggestion-pill-retail {
        background: rgba(219, 234, 254, 0.95);
        border-color: var(--accent-strong, #1d4ed8);
        color: var(--accent-strong, #1d4ed8);
    }

    .sa-suggestion-pill-learned.sa-suggestion-pill-ingredient {
        background: rgba(220, 252, 231, 0.95);
        border-color: #059669;
        color: #047857;
    }

    .sa-suggestion-pill-learned.sa-suggestion-pill-operational {
        background: rgba(243, 244, 246, 0.98);
        border-color: #4b5563;
        color: #374151;
    }


/* ── Vendor bulk strip: learned variant ──────────────────────────────
   The bulk strip's "Suggested:" label gets a matching ↻ when the
   vendor-level suggestion is per-account-derived. Subtle but consistent
   with the per-item pill treatment. */

.sa-bulk-strip-suggest-learned .sa-bulk-strip-suggest-kind::before {
    content: "↻ ";
    margin-right: 0.15rem;
    font-weight: 600;
    opacity: 0.85;
}


/* ── Touch / no-hover device overrides ───────────────────────────────
   On tablet/phone the title tooltip is invisible — there's no hover.
   The dashed border + glyph already carries the "learned" meaning.
   This block hardens the visual: slightly thicker border, slightly
   bolder text, so it reads at arm's length on a 10" iPad. */

@media (hover: none) {
    .sa-suggestion-pill-learned {
        border-width: 2px;
    }

    /* General pill legibility on touch — applies to ALL kind pills.
       Phase 9 isn't the right home for broad tablet polish, but the
       suggestion pills are central to this page's UX and the bump
       cost is zero. */
    .sa-suggestion-pill {
        font-size: 0.78rem;
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }
}