/* Officer choices use their abilities as the main visual comparison. */
#preparation #prepPopover.officer-picker{overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#967047 #ecd8ae}
#preparation #prepPopover.officer-picker::-webkit-scrollbar{width:8px}
#preparation #prepPopover.officer-picker::-webkit-scrollbar-track{background:#ecd8ae}
#preparation #prepPopover.officer-picker::-webkit-scrollbar-thumb{background:#967047}
#preparation .officer-candidate{display:flex;align-items:center;gap:12px;min-height:128px;padding:10px 8px;text-align:left}
#preparation .officer-candidate>.candidate-portrait{width:84px;height:84px;flex:0 0 84px}
#preparation .officer-candidate .candidate-details{flex:1;min-width:0}
#preparation .officer-candidate .candidate-heading{font:600 25px/28px var(--font-display);white-space:nowrap;margin:0}
#preparation .officer-candidate .candidate-heading small{display:inline;white-space:nowrap;font:500 17px/22px var(--font-body);letter-spacing:0;margin:0;color:#735536}
#preparation .officer-candidate .candidate-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
#preparation .officer-candidate .assign-officer{flex:0 0 108px;min-width:108px;min-height:44px;margin:0;padding:8px 6px;border:1px solid #8c623b;border-radius:0;background:#934d32;color:#fff0cc;box-shadow:none;font:600 17px/20px var(--font-display);letter-spacing:.2px;text-align:center;cursor:pointer}
#preparation .officer-candidate .assign-officer:is(:hover,:focus-visible){background:#7d3f29;outline:2px solid #79522e;outline-offset:3px}
#preparation .officer-candidate .assign-officer:disabled{background:#d9c28d;color:#4c5434;opacity:1;filter:none;cursor:default;outline:none}
#preparation .officer-candidate .prep-skills{gap:8px;margin:0}
#preparation .officer-candidate .prep-skill{width:64px;height:64px;flex:0 0 64px;cursor:help}
#preparation .officer-candidate .prep-skill>img{padding:4px}
#preparation .officer-candidate .prep-skill .skill-lock{width:28px;height:30px;left:8px;top:7px;padding:0;opacity:1;filter:none}
#preparation .officer-candidate .prep-skill .unlock-level{right:4px;bottom:2px;font:700 20px/22px var(--font-body)}
#preparation .officer-candidate .prep-skill:focus-visible{outline:2px solid #79522e;outline-offset:3px}
#preparation :is(.equipment-slot,.prep-officer)>.swap-cue{flex:0 0 12px;width:12px;height:18px;align-self:center;margin:0}
#preparation :is(.equipment-slot,.prep-officer)>.swap-cue svg{display:block;width:12px;height:18px;fill:none;stroke:#79522e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:none;transition:none}
#preparation .prep-officer[aria-expanded=true]>.swap-cue svg{transform:none}

/* Four reserved places: three active commands and one passive property.
   Empty places disclose only that the effect is not implemented yet. */
#preparation .prep-skills-grid{display:grid;grid-template-columns:repeat(2,var(--prep-skill-size));grid-template-rows:repeat(2,var(--prep-skill-size));gap:8px;margin:0;align-self:center;flex:none}
#preparation .prep-skills-grid>.prep-skill{width:var(--prep-skill-size);height:var(--prep-skill-size);min-width:var(--prep-skill-size);min-height:var(--prep-skill-size);padding:0;overflow:hidden;box-sizing:border-box}
#preparation .prep-skills-grid>.prep-skill>img{display:block;width:100%;height:100%;padding:5px;object-fit:contain}
#preparation .prep-skills-grid>.future-slot{opacity:.62;background:#dfd6c3!important;border-color:#a2967b!important;box-shadow:inset 0 0 0 2px #f5ebd755!important}
#preparation .prep-skills-grid>.future-slot>.future-skill-lock{padding:18%;opacity:.55;filter:saturate(.45)}
#preparation .prep-skills-grid>.prep-skill .passive-mark{right:2px;bottom:1px;padding:0 2px;font:700 20px/21px 'Alegreya',serif;background:#e4e0d0e6}
#preparation #prepPopover.officer-picker .officer-candidate{display:grid;grid-template-columns:84px minmax(0,1fr) 136px;column-gap:12px;min-height:156px;align-items:center}
#preparation #prepPopover.officer-picker .candidate-heading{display:block;white-space:normal;font:700 25px/28px 'Alegreya',serif;overflow-wrap:normal}
#preparation #prepPopover.officer-picker .candidate-heading small{display:block;white-space:normal;margin-top:4px}
#preparation #prepPopover.officer-picker .candidate-actions{display:block;margin-top:12px}
#preparation #prepPopover.officer-picker .prep-skills-grid{--prep-skill-size:64px}
#preparation #prepOfficers .prep-officer{display:grid;grid-template-columns:10px 72px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left}
#preparation #prepOfficers .prep-officer-info{min-width:0}
#preparation #prepOfficers .prep-officer-info b{display:block;white-space:normal;overflow-wrap:normal}
#preparation #prepOfficers .prep-officer-info small{display:block;letter-spacing:0}
#preparation #prepOfficers .prep-skills-grid{--prep-skill-size:44px;gap:4px}
@media(max-width:1800px){#preparation #prepOfficers .prep-officer{grid-template-columns:8px 64px minmax(0,1fr) auto;gap:6px}#preparation #prepOfficers .prep-skills-grid{--prep-skill-size:40px}}
@media(max-width:1400px),(max-height:850px){
 #preparation #prepOfficers{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;grid-template-rows:repeat(6,minmax(80px,1fr));scrollbar-width:thin;scrollbar-color:#967047 #ecd8ae}
 #preparation #prepOfficers .prep-officer{grid-template-columns:8px 56px minmax(0,1fr) auto;gap:5px;padding:3px 0}
 #preparation #prepOfficers .prep-officer-info b{font-size:20px;line-height:22px}
 #preparation #prepOfficers .prep-skills-grid{--prep-skill-size:36px}
 #preparation #prepOfficers .prep-skills-grid>.prep-skill>img{padding:3px}
 #preparation #prepOfficers .prep-skills-grid>.future-slot>.future-skill-lock{padding:18%}
}