/* Firm profile editor (X49): firm name + CEO look, shared by the game app and the practice term.
   Markup comes from LawyerGen.Profile.editorHtml() (js/lawyer-gen.js); palette and fonts from css/main.css. */
.prof { display: grid; gap: 12px 16px; align-items: start; }
@media (min-width: 560px) { .prof { grid-template-columns: 144px minmax(0, 1fr); } }
.prof-art { width: 144px; height: 192px; background: var(--ink); box-shadow: 0 0 0 2px var(--ink); justify-self: center; }
.prof-art canvas { width: 144px; height: 192px; display: block; }
.prof-form { min-width: 0; }
.prof-lab { display: block; font: 700 15px/1 var(--f-ui); margin: 0 0 4px; }
.prof-name { width: calc(100% - 2 * var(--px)); text-transform: uppercase; letter-spacing: .02em; }
.prof-name[aria-invalid="true"] { box-shadow: 0 0 0 var(--px) var(--red), inset var(--px) var(--px) 0 var(--mist); }
.prof-shown { margin: 4px 0 2px; min-height: 1.3em; color: var(--mint); overflow-wrap: anywhere; }
.prof-shown.is-err { color: var(--rose); }
.prof-rule { margin: 0 0 10px; }
.prof-parts { border: 0; margin: 0; padding: 0; display: grid; gap: 6px 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.prof-parts legend { font: 700 15px/1 var(--f-ui); padding: 0; margin: 0 0 6px; }
.prof-part { display: grid; gap: 2px; min-width: 0; }
.prof-part label { font: 400 14px/1.2 var(--f-ui); color: var(--text-dim); }
.prof-part select { min-height: 40px; width: 100%; background: var(--navy); color: var(--paper); border: 2px solid var(--mist);
  font: 400 14px var(--f-body); padding: 4px 6px; }
.prof-part select option:disabled { color: var(--fog); }
.prof-lock { margin: 8px 0 4px; }
.prof-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prof-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.prof-box { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--slate); }
.prof-dlg { width: min(720px, calc(100vw - 24px)); }
/* a firm's name with its CEO's small portrait (results feed, lists) */
.firm-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap; }
.firm-tag img { width: 24px; height: 24px; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--ink); flex: 0 0 24px; }
.firm-tag b { font-weight: 700; color: var(--white); }

/* Xen, 29 Sep: arrow steppers instead of dropdowns */
.prof-plab { font: 400 14px/1.2 var(--f-ui); color: var(--text-dim); }
.prof-step { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: stretch; min-height: 40px;
  background: var(--navy); box-shadow: inset 0 0 0 2px var(--mist); }
.prof-arrow { border: 0; background: transparent; color: var(--pad); font: 700 24px/1 var(--f-ui); cursor: pointer; padding: 0; }
.prof-arrow:hover { background: var(--slate); }
.prof-arrow:focus-visible { outline: 2px solid var(--pad); outline-offset: -4px; }
.prof-val { display: flex; align-items: center; justify-content: center; text-align: center; font: 700 14px/1.2 var(--f-ui);
  color: var(--paper); padding: 2px 4px; overflow-wrap: anywhere; }