/* LEARNING-LOOP: feedback chips, the 1-5 rating, the funder tip, the requirements card. Tokens only
   (static/css/sdm_tokens.css); small phones first: everything wraps at 360px, nothing scrolls sideways. */
.ll-box { border: 1px solid var(--c-border); border-radius: var(--radius-card, 12px); background: var(--c-white);
          color: var(--c-black); padding: 16px; margin: 16px 0; max-width: 46rem; overflow-wrap: anywhere; }
.ll-box h2, .ll-box h3 { font-size: 18px; margin: 0 0 8px; }
.ll-muted { color: var(--c-muted); font-size: 14px; margin: 4px 0; }
.ll-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 0; border: 0; }
.ll-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
           border: 1px solid var(--c-border); border-radius: 22px; background: var(--c-white); cursor: pointer;
           font-size: 15px; max-width: 100%; }
.ll-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ll-chip:has(input:checked) { background: var(--c-brand); border-color: var(--c-black); color: var(--c-black); }
.ll-chip:has(input:focus-visible) { outline: 2px solid var(--c-black); outline-offset: 2px; }
.ll-rating .ll-chip { min-width: 48px; justify-content: center; }
.ll-note { width: 100%; box-sizing: border-box; min-height: 88px; font-size: 16px; padding: 8px;
           border: 1px solid var(--c-border); border-radius: 8px; }
.ll-btn { display: inline-block; min-height: 48px; padding: 12px 20px; border-radius: 24px; border: 1px solid var(--c-black);
          background: var(--c-brand); color: var(--c-black); font-weight: 600; font-size: 16px; cursor: pointer;
          text-decoration: none; }
.ll-btn--quiet { background: var(--c-white); }
.ll-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ll-tip { border-left: 4px solid var(--c-brand); background: var(--c-brand-tint); padding: 12px 14px; margin: 12px 0;
          border-radius: 8px; max-width: 46rem; color: var(--c-black); }
.ll-tip strong { display: block; margin-bottom: 4px; }
.ll-label { display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 12px;
            background: var(--c-warn-tint); color: var(--c-warn-ink); font-weight: 600; margin: 4px 0; }
.ll-ok { color: var(--c-ok); font-weight: 600; }
.ll-bad { color: var(--c-bad); font-weight: 600; }
.ll-list { list-style: none; padding: 0; margin: 8px 0; }
.ll-list li { padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.ll-error { background: var(--c-bad-tint); color: var(--c-bad); padding: 8px 12px; border-radius: 8px; }
.ll-field { margin: 12px 0; }
.ll-field label, .ll-field legend { display: block; font-weight: 600; margin: 0 0 6px; }
.ll-field select, .ll-field input[type=text], .ll-field input[type=number] { width: 100%; max-width: 100%;
          box-sizing: border-box; min-height: 44px; font-size: 16px; padding: 6px 8px; }
.ll-field select[multiple] { min-height: 120px; }
.ll-footer-link { text-align: center; margin: 8px 0; font-size: 14px; }
.ll-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ll-table th, .ll-table td { text-align: left; padding: 6px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.ll-scroll { overflow-x: auto; max-width: 100%; }
details.ll-details > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }