/* Shared rounded personal character editor. Loaded in the manager and /staff shells. */
.pc-settings { min-width: 0; }
.pc-editor { color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-width: 0; }
.pc-editor * { box-sizing: border-box; }
.pc-heading { margin-bottom: var(--s-4); }
.pc-heading h2 { color: var(--navy-dark); font-size: var(--t-title); line-height: 1.2; margin: 0 0 var(--s-1); }
.pc-heading p { color: var(--muted); font-size: var(--t-body); line-height: 1.5; margin: 0; }
.pc-layout { display: grid; gap: var(--s-4); min-width: 0; }
.pc-preview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr); gap: var(--s-3); align-items: end; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--wash); min-width: 0; }
.pc-preview-full, .pc-preview-portrait { display: grid; justify-items: center; align-content: end; min-width: 0; }
.pc-kicker { display: block; color: var(--muted); font-size: var(--t-sub); font-weight: 600; text-align: center; margin-bottom: var(--s-2); }
.pc-preview-full [data-pc-full], .pc-preview-portrait [data-pc-portrait] { width: 100%; display: grid; place-items: center; }
.pc-preview-full .pc-character { display: block; width: min(100%, 220px); height: auto; max-height: 295px; filter: drop-shadow(1px 3px 3px rgb(35 38 56 / .12)); }
.pc-preview-portrait [data-pc-portrait] { width: min(100%, 110px); aspect-ratio: 1; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--line); overflow: hidden; }
.pc-preview-portrait .pc-character { display: block; width: 100%; height: 100%; }
.pc-options { min-width: 0; }
.pc-group { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-m); margin: 0 0 var(--s-3); padding: var(--s-3); background: var(--surface-card); }
.pc-group legend { color: var(--navy-dark); font-size: var(--t-section); font-weight: 700; padding: 0 var(--s-1); }
.pc-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.pc-preset, .pc-surprise, .pc-target, .pc-save, .pc-reset { min-height: var(--control-height-touch); font: inherit; font-size: var(--t-body); cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-2) var(--s-3); background: var(--surface-card); color: var(--navy-dark); text-align: left; }
.pc-preset:hover, .pc-target:hover, .pc-surprise:hover, .pc-reset:hover { background: var(--wash); border-color: var(--navy); }
.pc-surprise { display: block; width: 100%; text-align: center; margin-top: var(--s-2); color: var(--navy); font-weight: 700; }
.pc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.pc-field { display: grid; gap: var(--s-1); min-width: 0; color: var(--navy-dark); font-size: var(--t-sub); font-weight: 600; }
.pc-field select, .pc-field input[type="text"] { display: block; width: 100%; min-width: 0; min-height: var(--control-height-touch); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-2); background: var(--surface-card); color: var(--ink); font: inherit; font-size: var(--t-body); }
.pc-field input[type="range"] { width: 100%; min-height: var(--control-height-touch); margin: 0; accent-color: var(--navy); cursor: pointer; }
.pc-field input[aria-invalid="true"] { border-color: var(--bad-fg); }
.pc-skins { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--control-height-touch), 1fr)); gap: var(--s-2); }
.pc-skin { min-width: 0; min-height: var(--control-height-touch); display: grid; place-items: center; border: 2px solid transparent; border-radius: var(--r-m); background: var(--wash); cursor: pointer; }
.pc-skin[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--surface-card); }
.pc-skin-dot { display: block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.pc-help { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; margin: 0 0 var(--s-3); }
.pc-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.pc-target { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); min-width: 0; font-size: var(--t-sub); }
.pc-target[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); font-weight: 700; }
.pc-target-dot { display: block; flex: 0 0 17px; width: 17px; height: 17px; border: 1px solid var(--line); border-radius: 50%; }
.pc-color-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; min-width: 0; }
.pc-wheel-wrap { display: grid; place-items: center; }
.pc-wheel { --pc-hue: hsl(0 100% 50%); position: relative; display: block; width: 164px; height: 164px; border-radius: 50%; border: 1px solid var(--line); background: conic-gradient(hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%)); cursor: crosshair; touch-action: none; }
.pc-wheel::before { content: ''; position: absolute; inset: 17%; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--line); }
.pc-wheel-center { position: absolute; z-index: 1; inset: 30%; border-radius: 50%; border: 2px solid var(--surface-card); background: var(--pc-hue); box-shadow: 0 0 0 1px var(--line); }
.pc-wheel-indicator { position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface-card); background: var(--navy-dark); box-shadow: 0 0 0 1px var(--navy-dark); transform: translate(-50%, -50%); pointer-events: none; }
.pc-color-fields { display: grid; gap: var(--s-2); min-width: 0; }
.pc-hex-error { display: block; color: var(--bad-fg); font-size: var(--t-sub); min-height: 1.3em; }
.pc-swatch-label { color: var(--navy-dark); font-size: var(--t-sub); font-weight: 600; margin: var(--s-3) 0 var(--s-2); }
.pc-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--control-height-touch), 1fr)); gap: var(--s-2); }
.pc-swatch { width: 100%; min-height: var(--control-height-touch); border: 2px solid var(--surface-card); border-radius: var(--r-s); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.pc-swatch:hover { box-shadow: 0 0 0 2px var(--navy); }
.pc-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pc-save { text-align: center; font-weight: 700; color: var(--surface-card); background: var(--navy); border-color: var(--navy); }
.pc-save:hover { background: var(--navy-dark); }
.pc-reset { text-align: center; }
.pc-save:disabled, .pc-reset:disabled { opacity: .55; cursor: wait; }
.pc-status { min-height: 1.5em; margin: var(--s-2) 0 0; color: var(--navy); font-size: var(--t-sub); }
.pc-editor :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.acct-character { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--line); }
.acct-character { width: 27px; height: 27px; }
.acct-character .pc-character { display: block; width: 100%; height: 100%; }
.sa-bar-acct .pc-character { display: block; width: 26px; height: 26px; }
.sa-menu-character { display: block; width: 100%; min-height: var(--control-height-touch); margin: var(--s-2) 0; text-align: left; color: var(--navy-dark); font-weight: 600; }
@media (min-width: 780px) {
  .pc-layout { grid-template-columns: minmax(215px, 270px) minmax(0, 1fr); align-items: start; }
  .pc-preview { position: sticky; top: var(--s-3); display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .pc-fields { grid-template-columns: 1fr; } }
@media (max-width: 380px) {
  .pc-color-panel { grid-template-columns: 1fr; }
  .pc-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-presets, .pc-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pc-editor *, .pc-editor *::before, .pc-editor *::after { scroll-behavior: auto; transition: none; animation: none; } }