/* pr.css -- the build-sticker decoder.
   Builds on fault.css (.fc-tool, .fc-hint, .fc-count, .fc-systems, .fc-table) and only
   adds what the paste-a-sticker layout needs. Someone using this is typically standing at
   the car with the service book open, so the input has to take a pasted block comfortably
   on a phone and the results have to be scannable at a glance. */

.pr-label{display:block;font-family:"Chakra Petch",sans-serif;text-transform:uppercase;
  letter-spacing:.07em;font-size:.78rem;color:var(--faint,#9fb3c8);margin:0 0 .5rem}

#prq{width:100%;font-size:1.05rem;line-height:1.5;padding:.9rem 1rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.30);color:var(--text,#e8eef6);
  font-family:"JetBrains Mono",ui-monospace,monospace;resize:vertical;min-height:5.2rem;
  -webkit-appearance:none}
#prq:focus{outline:none;border-color:#4aa3ff;box-shadow:0 0 0 3px rgba(74,163,255,.20)}
#prq:disabled{opacity:.55}

.pr-results{list-style:none;padding:0;margin:1.1rem 0 0}
.pr-group{margin:0 0 1.35rem}
.pr-group h3{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:.8rem;color:#4aa3ff;margin:0 0 .55rem;
  padding-bottom:.35rem;border-bottom:1px solid rgba(255,255,255,.10)}

.pr-list{list-style:none;padding:0;margin:0}
.pr-list li{display:flex;gap:.85rem;align-items:baseline;padding:.42rem 0;
  border-bottom:1px solid rgba(255,255,255,.045)}
.pr-list li:last-child{border-bottom:0}
.pr-code{flex:0 0 3.1rem;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-weight:700;color:#4aa3ff;font-size:.98rem}
.pr-d{flex:1;line-height:1.45}

/* Codes we hold no description for are shown rather than silently dropped - a missing
   code is information too, and hiding it would make the tool look like it had answered. */
.pr-group:last-child h3{color:var(--faint,#9fb3c8)}

@media (max-width:560px){
  #prq{font-size:1rem;min-height:6rem}
  .pr-list li{gap:.6rem}
  .pr-code{flex-basis:2.7rem;font-size:.92rem}
  .pr-d{font-size:.95rem}
}