.citizen-portrait{display:block;width:48px;height:48px;flex:none;object-fit:cover;border-radius:12px;background:#ebe3d1;border:1px solid #d9d4c3}
.citizen .citizen-portrait{width:40px;height:40px;border-radius:50%}.portrait-button{padding:0;background:transparent;border:0;cursor:pointer;flex:none}.portrait-button:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:14px}
.scene-person{display:flex;align-items:center;gap:18px}.scene-person .citizen-portrait{width:80px;height:80px;border:2px solid #eadbb8;box-shadow:0 4px 14px #102a2933}.portrait-button small{display:block;color:inherit;font-size:11px;margin-top:5px}
.portrait-picker{border:0;padding:0;margin:20px 0}.portrait-picker legend{margin-bottom:12px}.portrait-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.portrait-option{position:relative;cursor:pointer;display:block}.portrait-option input{position:absolute;top:8px;left:8px;accent-color:var(--green);z-index:1}.portrait-option>span{display:flex;flex-direction:column;gap:8px;align-items:center;padding:7px;border:2px solid transparent;border-radius:12px;background:#f6f3e9}.portrait-option .citizen-portrait{width:100%;height:auto;aspect-ratio:1;border-radius:8px}.portrait-option small{font-size:12px;color:var(--ink)}.portrait-option input:checked+span{border-color:var(--green);background:#e8eddf}.portrait-option input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}.profile-preview{display:flex;align-items:center;gap:16px}.profile-preview .citizen-portrait{width:68px;height:68px}
.people-contracts{margin-bottom:24px}.contract-empty{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0}.contract-empty p{margin:0!important}.contract-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.contract-toolbar select{width:auto}.contract-history{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.contract-history summary{cursor:pointer;font-weight:600}.contract-history summary span{font-size:12px;color:var(--muted);font-weight:400;margin-left:12px}.ended-contract{display:flex;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}.ended-contract>p{flex:1;margin:0}.ended-contract small{display:block;color:var(--muted)}
.people-scroll-hint{display:none}
.people-filter-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr .65fr 1fr 1.25fr;gap:12px}.people-filter-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted);min-width:0}.people-filter-grid input,.people-filter-grid select,.contract-toolbar select{width:100%;min-width:0;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fffef9;color:var(--ink);font:inherit;font-size:13px}.contract-toolbar select{width:auto}.people-filter-grid :is(input,select):focus-visible{outline:2px solid var(--gold);outline-offset:2px}.people-list-meta{display:flex;align-items:center;gap:20px;margin:16px 0;font-size:12px;color:var(--muted);flex-wrap:wrap}.people-available{display:flex;align-items:center;gap:8px}.people-available input{width:auto}.people-list-meta>button{margin-left:auto}
.people-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}.people-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.people-table th{background:#f5f3ea;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}.people-table th,.people-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}.people-table tbody tr:last-child td{border-bottom:0}.people-table tbody tr:hover{background:#f8f8ef}.people-table td>small,.resident-identity small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.people-table td>small.positive{color:var(--green)}.resident-table{min-width:800px}.contract-table{min-width:900px}.resident-identity{display:flex;align-items:center;gap:12px}.resident-identity strong{font-size:14px;font-weight:600}.resident-identity .citizen-portrait{width:44px;height:44px;border-radius:10px}.people-row-actions{display:flex;gap:6px;white-space:nowrap}.people-sort{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;border:0;color:inherit;cursor:pointer;font:inherit}.people-sort:hover{color:var(--green)}.people-sort:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.people-table th[aria-sort=ascending],.people-table th[aria-sort=descending]{color:var(--green)}.resident-skills summary{cursor:pointer;white-space:nowrap}.resident-skill-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 0;min-width:245px}.resident-skill-list .skill-label{font-size:12px}.resident-skill-list .skill-art{width:20px;height:20px}.assignment-person{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
@media(max-width:1200px){.people-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.people-scroll-hint{display:block;font-size:11px!important;color:var(--muted);line-height:1.7;margin:0 0 12px!important}.resident-table{table-layout:fixed;width:800px}.resident-table th:first-child,.resident-table td:first-child{position:sticky;left:0;z-index:1;background:#fffef9;box-shadow:3px 0 5px #283d3a0a;width:125px;min-width:125px;max-width:125px}.resident-table th:first-child{z-index:2;background:#f5f3ea}.resident-table th:last-child,.resident-table td:last-child{width:120px}.resident-table .resident-identity{gap:7px}.resident-table .resident-identity strong{font-size:12px;overflow-wrap:anywhere}.resident-table .resident-identity .citizen-portrait{width:34px;height:34px}.resident-table .people-row-actions{flex-direction:column;align-items:stretch;gap:6px}.resident-skill-list{grid-template-columns:1fr;min-width:0}}
@media(max-width:720px){.people-directory,.people-contracts{padding:16px!important}.people-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.people-search{grid-column:1/-1}.contract-empty,.ended-contract{align-items:flex-start;flex-wrap:wrap;gap:12px}.contract-history summary span{display:block;margin:7px 0 0}.people-list-meta{gap:12px}.people-table th,.people-table td{padding:10px}.portrait-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.scene-person{gap:12px}.scene-person .citizen-portrait{width:58px;height:58px}.portrait-option small{font-size:11px}.assignment-person{align-items:flex-start;flex-direction:column}}
