/* Loupilo Citron Intelligence — presentation-only layer.
   Keep these opt-in classes after all legacy route styles. No workflow or billing overrides. */
:root {
  --lci-citron: #D7E45B;
  --lci-citron-hover: #E3EC83;
  --lci-citron-pressed: #C2D041;
  --lci-graphite: #1C1E21;
  --lci-mint: #78CEBC;
  --lci-outline: #646C70;
  --lci-cream: #EEEDE8;
}

#app :is(button,a).lci-control {
  --lci-height: 44px;
  --lci-icon-size: 18px;
  box-sizing: border-box;
  position: relative;
  min-height: var(--lci-height);
  min-width: 44px;
  border-radius: 999px;
  padding: 9px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  vertical-align: middle;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, transform .14s ease;
}

#app :is(button,a).lci-control:is(.review-primary,.intake-preview-primary,.guest-primary,.overview-primary) { --lci-height: 48px; --lci-icon-size: 20px; }
#app :is(button,a).lci-control.small {
  --lci-height: 36px;
  --lci-icon-size: 16px;
  min-width: 36px;
  padding: 7px 13px;
}

#app :is(button,a).lci-control.lci-primary {
  background: var(--lci-citron);
  border: 1px solid var(--lci-citron);
  color: var(--lci-graphite);
  -webkit-text-fill-color: var(--lci-graphite);
}
#app :is(button,a).lci-control.lci-primary:not(:disabled):hover {
  background: var(--lci-citron-hover);
  border-color: var(--lci-citron-hover);
  color: var(--lci-graphite);
  -webkit-text-fill-color: var(--lci-graphite);
  filter: none;
}
#app :is(button,a).lci-control.lci-primary:not(:disabled):active {
  background: var(--lci-citron-pressed);
  border-color: var(--lci-citron-pressed);
}

#app :is(button,a).lci-control.lci-ai {
  color: var(--lci-cream);
  -webkit-text-fill-color: var(--lci-cream);
  border: 1px solid transparent;
  background: linear-gradient(#23272A,#23272A) padding-box,
              linear-gradient(110deg,var(--lci-citron),var(--lci-mint)) border-box;
  box-shadow: inset 0 0 0 1px rgba(215,228,91,.05);
}
#app :is(button,a).lci-control.lci-ai:not(:disabled):hover {
  color: var(--lci-cream);
  -webkit-text-fill-color: var(--lci-cream);
  background: linear-gradient(#2A3032,#2A3032) padding-box,
              linear-gradient(110deg,var(--lci-citron),var(--lci-mint)) border-box;
  box-shadow: 0 0 0 3px rgba(215,228,91,.085);
  filter: none;
}
#app :is(button,a).lci-control.lci-ai:not(:disabled):active {
  background: linear-gradient(#171A1C,#171A1C) padding-box,
              linear-gradient(110deg,var(--lci-citron),var(--lci-mint)) border-box;
  box-shadow: none;
}

#app :is(button,a).lci-control.lci-secondary {
  background: #252A2D;
  border: 1px solid var(--lci-outline);
  color: var(--lci-cream);
  -webkit-text-fill-color: var(--lci-cream);
}
#app :is(button,a).lci-control.lci-secondary:not(:disabled):hover {
  background: #30363A;
  border-color: #929B9C;
  color: var(--lci-cream);
  -webkit-text-fill-color: var(--lci-cream);
  filter: none;
}
#app :is(button,a).lci-control.lci-secondary:not(:disabled):active {
  background: #1D2225;
}
#app :is(button,a).lci-control.lci-danger {
  background: transparent;
  border: 1px solid #B67774;
  color: #F4B8B2;
  -webkit-text-fill-color: #F4B8B2;
}
#app :is(button,a).lci-control.lci-danger:not(:disabled):hover {
  background: rgba(238,153,144,.1);
  border-color: #EE9990;
  color: #FFE2DD;
  -webkit-text-fill-color: #FFE2DD;
}
#app :is(button,a).lci-control.lci-tertiary {
  background: transparent;
  color: var(--lci-cream);
  -webkit-text-fill-color: var(--lci-cream);
  border: 1px solid transparent;
}
#app :is(button,a).lci-control.lci-tertiary:hover { background: rgba(238,237,232,.06); }

#app :is(button,a).lci-control:focus-visible,
#app .sidebar nav a:focus-visible {
  outline: 2px solid var(--lci-citron);
  outline-offset: 3px;
}
#app :is(button,a).lci-control:disabled,
#app :is(button,a).lci-control[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
#app :is(button,a).lci-control .lci-icon {
  width: var(--lci-icon-size);
  height: var(--lci-icon-size);
  flex: 0 0 var(--lci-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
  color: currentColor;
}
#app :is(button,a).lci-control .lci-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#app :is(button,a).lci-control .lci-icon--sparkle {
  color: var(--lci-citron);
  margin-left: -1px; /* optical centring — not just the SVG viewbox */
  margin-right: 1px;
}
/* Evaluation access text stays legible as a second row in the existing submit action. */
#app .evaluation-submit :is(button,a).lci-ai {
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 2px;
}
#app .evaluation-submit :is(button,a).lci-ai .evaluation-action-cost {
  flex: 0 0 100%;
  text-align: center;
  font-size: 11px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  opacity: .84;
}
#app .sidebar nav a > .lci-nav-mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  color: inherit;
  pointer-events: none;
}
#app .sidebar nav a > .lci-nav-mark svg {
  width: 20px;
  height: 20px;
  display: block;
}
@media(max-width:720px) {
  #app :is(button,a).lci-control { max-width:100%; white-space:normal; }
}

/* The review submit sits inside a vertical flex container. A generic mobile
   flex-basis:140px on buttons made this CTA 140px tall on narrow screens.
   Scope sizing to this single submit control, never all form actions. */
@media(max-width:900px) {
  #app .new-review-form .form-actions .evaluation-submit {
    flex: 0 1 250px;
    width: min(100%, 250px);
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
  }
  #app .new-review-form .form-actions .evaluation-submit > button.review-primary.lci-control {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 16px;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
  }
  /* Credit eligibility is already described in the immediately following
     explanatory note; don't turn the button into a two-row card on mobile. */
  #app .new-review-form .form-actions .evaluation-submit .evaluation-action-cost {
    display: none;
  }
  #app .new-review-form .form-actions .evaluation-submit .evaluation-action-note {
    width: 100%;
    max-width: 250px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
  }
}
@media(max-width:600px) {
  #app .new-review-form .form-actions .evaluation-submit {
    flex: 0 0 auto;
    width: 100%;
  }
  #app .new-review-form .form-actions .evaluation-submit > button.review-primary.lci-control {
    min-height: 48px;
  }
  #app .new-review-form .form-actions .evaluation-submit .evaluation-action-note {
    max-width: none;
  }
}
@media(prefers-reduced-motion:reduce) {
  #app :is(button,a).lci-control { transition:none; transform:none; }
}