/* Page-specific styles split from hongyi-mobile.css: people */

.person-list article div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page[data-panel="people"] > .full-action {
  height: 42px;
  margin-top: 14px;
  border-color: rgba(155, 107, 32, 0.48);
  border-radius: 14px;
  background: linear-gradient(135deg, #f1c45b 0%, #bf7a16 100%);
  color: #071225;
  box-shadow:
    0 10px 20px rgba(88, 52, 10, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.page[data-panel="people"] .person-list {
  gap: 10px;
  grid-template-columns: 1fr !important;
  margin-top: 12px;
}

.page[data-panel="people"] .staff-review-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page[data-panel="people"] .staff-review-group + .staff-review-group {
  margin-top: 14px;
}

.page[data-panel="people"] .staff-review-group > header {
  display: flex;
  grid-column: 1 / -1;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  border-bottom: 1px solid rgba(201, 190, 174, 0.72);
}

.page[data-panel="people"] .staff-review-group h3 {
  margin: 0;
  color: #071225;
  font-size: 15px;
  font-weight: 950;
}

.page[data-panel="people"] .staff-review-group > header span {
  color: #806033;
  font-size: 12px;
  font-weight: 900;
}

.page[data-panel="people"] .staff-review-group > article.empty {
  grid-column: 1 / -1;
}

.page[data-panel="people"] .person-list article {
  display: grid;
  gap: 7px;
  padding: 13px;
  border-color: rgba(201, 190, 174, 0.72);
  border-radius: 16px;
  background: #fffaf2;
  box-shadow: 0 10px 24px rgba(71, 54, 31, 0.08);
}

.page[data-panel="people"] .person-list strong {
  color: #071225;
  font-size: 15px;
  line-height: 1.25;
}

.page[data-panel="people"] .person-list span,
.page[data-panel="people"] .person-list small {
  color: #59677a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.page[data-panel="people"] .person-list article div {
  gap: 8px;
  margin-top: 4px;
}

.page[data-panel="people"] .person-list button:not(.staff-card-avatar) {
  height: 34px;
  border: 1px solid rgba(201, 190, 174, 0.88);
  border-radius: 12px;
  background: #fffdf8;
  color: #071225;
  box-shadow: none;
}

.page[data-panel="people"] .person-list button:not(.staff-card-avatar):first-child {
  border-color: #071225;
  background: #071225;
  color: #fff7dd;
}

@media (max-width: 720px) {
  .page[data-panel="people"] .staff-review-group {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .page[data-panel="people"] {
    padding-inline: 8px;
  }

  .page[data-panel="people"] .person-list {
    display: block;
    margin-top: 10px;
    padding-bottom: 86px;
  }

  .page[data-panel="people"] .staff-management-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 14px;
  }

  .page[data-panel="people"] .staff-management-title {
    min-width: 0;
  }

  .page[data-panel="people"] .staff-management-title strong {
    display: inline;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-management-title span {
    display: inline;
    margin-left: 4px;
    font-size: 11px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-management-actions {
    justify-self: end;
  }

  .page[data-panel="people"] .staff-management-actions .primary {
    min-height: 40px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-filter-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page[data-panel="people"] .staff-filter-row input,
  .page[data-panel="people"] .staff-filter-row select,
  .page[data-panel="people"] .staff-filter-row button {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
    font-size: 13px;
  }

  .page[data-panel="people"] .staff-filter-row button {
    min-height: 42px;
  }

  .page[data-panel="people"] .staff-search-count {
    grid-column: 1 / -1;
    display: block;
    margin-top: -2px;
    font-size: 12px;
    text-align: left;
  }

  .page[data-panel="people"] .staff-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page[data-panel="people"] .staff-status-section + .staff-status-section {
    margin-top: 16px;
  }

  .page[data-panel="people"] .staff-status-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(213, 226, 240, 0.95);
    font-size: 13px;
    font-weight: 950;
  }

  .page[data-panel="people"] .staff-status-section-header span {
    color: #9b6b20;
    font-size: 12px;
    font-weight: 900;
  }

  .page[data-panel="people"] .staff-member-card {
    position: relative;
    min-height: auto;
    padding: 12px;
    border-radius: 14px;
  }

  .page[data-panel="people"] .staff-member-card.is-pending {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(180deg, #fffaf1 0%, #fff 100%);
  }

  .page[data-panel="people"] .staff-card-menu {
    display: none !important;
  }

  .page[data-panel="people"] .staff-card-main {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-right: 0;
  }

  .page[data-panel="people"] .staff-card-avatar {
    display: flex !important;
    width: 104px;
    height: 104px;
    max-width: 104px;
    max-height: 104px;
    min-width: 104px;
    min-height: 104px;
    aspect-ratio: 1 / 1;
    flex: 0 0 104px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    border: 0;
    background: linear-gradient(135deg, #f8e6b7 0%, #d6a13a 100%);
    color: #7a4c0f;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
  }

  .page[data-panel="people"] button.staff-card-avatar {
    padding: 0;
    width: 104px;
    height: 104px;
    min-width: 104px;
    min-height: 104px;
    border: 0;
    appearance: none;
    font: inherit;
    cursor: zoom-in;
  }

  .page[data-panel="people"] .staff-card-avatar.has-photo {
    border: 0;
    background: #f8fafc;
    box-shadow: none;
  }

  .page[data-panel="people"] .staff-card-avatar img {
    width: 100% !important;
    min-width: 100%;
    height: 100% !important;
    min-height: 100%;
    border-radius: 22px;
    object-fit: cover;
    display: block;
  }

  .page[data-panel="people"] .staff-card-copy {
    display: block !important;
    min-width: 0;
    padding-top: 2px;
  }

  .page[data-panel="people"] .staff-card-name {
    display: flex !important;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 17px;
    line-height: 1.25;
  }

  .page[data-panel="people"] .staff-owner-mark {
    padding: 2px 6px;
    font-size: 11px;
  }

  .page[data-panel="people"] .staff-card-role {
    margin-top: 5px;
    font-size: 13px;
  }

  .page[data-panel="people"] .staff-card-department,
  .page[data-panel="people"] .staff-card-phone {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .page[data-panel="people"] .staff-card-footer {
    margin-top: 12px;
    gap: 6px;
    font-size: 12px;
  }

  .page[data-panel="people"] .staff-card-footer small {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .page[data-panel="people"] .staff-card-actions button {
    min-height: 40px;
    border-radius: 10px;
    font-size: 14px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal {
    width: min(100vw - 12px, 430px);
    max-height: calc(100dvh - 12px);
    border-radius: 16px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header {
    position: relative;
    display: block;
    min-height: 98px !important;
    padding: 24px 12px 12px !important;
    border-bottom: 1px solid rgba(224, 211, 194, 0.9);
    background: #fffdf8;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child {
    padding-right: 158px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child p,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child p {
    margin: 0 0 3px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header h2,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header h2 {
    display: block !important;
    margin: 0 !important;
    color: #071225 !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    white-space: nowrap;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions {
    position: absolute;
    top: 22px;
    right: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions button,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions button {
    min-width: 46px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid rgba(201, 190, 174, 0.95);
    border-radius: 9px;
    background: #fffdf8;
    color: #071225;
    font-size: 13px;
    font-weight: 900;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .primary,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .primary {
    border-color: rgba(155, 107, 32, 0.45);
    background: linear-gradient(135deg, #f1c45b 0%, #bf7a16 100%);
    color: #071225;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-delete,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-delete {
    border-color: rgba(239, 68, 68, 0.4);
    background: #fff7f7;
    color: #dc2626;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-close,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-close {
    min-width: 32px;
    width: 32px;
    padding: 0;
    font-size: 22px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-shell,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-shell {
    display: block;
    min-height: 0;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 7px 12px;
    align-items: center;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid #eadfce;
    background: #f7efe4;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo {
    display: flex;
    grid-row: span 3;
    width: 88px;
    height: 88px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #f8e6b7 0%, #d6a13a 100%);
    color: #7a4c0f;
    font-size: 19px;
    font-weight: 950;
    overflow: visible;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo img,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo img {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo button,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo button {
    right: 4px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal [data-staff-editor-name],
  .mobile-modal[data-modal="staff-create"].staff-editor-modal [data-staff-editor-name] {
    align-self: end;
    font-size: 19px;
    line-height: 1.2;
    text-align: left;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-role-pill,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-role-pill {
    justify-self: start;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fff7df;
    color: #9b6b20;
    font-size: 12px;
    font-weight: 900;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-status,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-status {
    justify-self: start;
    color: #176d3a;
    font-size: 12px;
    font-weight: 850;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav {
    grid-column: 1 / -1;
    display: flex;
    margin-top: 8px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav button,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav button {
    min-height: 36px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: #fff8ea;
    color: #7a4c0f;
    font-size: 13px;
    font-weight: 900;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content {
    max-height: calc(100dvh - 274px);
    padding: 14px 16px 24px;
    background: #fffdf8;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .form-section,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .form-section {
    padding: 14px;
    border: 1px solid rgba(201, 190, 174, 0.72);
    border-radius: 14px;
    background: #fff;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content h3,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content h3 {
    margin-bottom: 14px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-basic-grid,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-basic-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-access-field,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-access-field {
    grid-column: auto;
    min-height: 72px;
    padding: 12px 13px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-defaults-field,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-defaults-field {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 12px 13px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs {
    gap: 8px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label {
    grid-template-columns: 1fr auto;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label span,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label span {
    grid-column: 1 / -1;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field.wide,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field.wide {
    grid-column: auto;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field input,
  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field select,
  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field textarea,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field input,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field select,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field textarea {
    min-height: 42px;
    font-size: 14px;
  }
}
/* Shared staff card metadata, for both desktop and mobile layouts. */
.page[data-panel="people"] .staff-card-last-online {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin-top: 6px;
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.page[data-panel="people"] .staff-card-last-online time {
  color: #334155;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page[data-panel="people"] .staff-last-online-empty {
  color: #64748b;
}

/* Compact personnel cards and floating search. */
body .page[data-panel="people"] .staff-floating-search{position:sticky;top:0;z-index:35;padding:8px;background:rgba(250,248,243,.96);backdrop-filter:blur(12px);border-radius:14px;box-shadow:0 4px 16px #17203312;margin-bottom:8px}
body .page[data-panel="people"] .staff-floating-search input{width:100%;height:44px;min-height:44px;font-size:16px!important;border:1px solid #ded9ce;border-radius:10px;padding:8px 12px;background:#fff}
body .page[data-panel="people"] .staff-management-toolbar{padding:10px!important;display:block!important;margin-bottom:12px!important;min-height:0!important}
body .page[data-panel="people"] .staff-management-title{display:none!important}
body .page[data-panel="people"] .staff-filter-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
body .page[data-panel="people"] .staff-filter-row select,body .page[data-panel="people"] .staff-filter-row button{width:100%!important;min-width:0!important;grid-column:auto!important;min-height:40px!important;height:40px!important;padding:6px 8px!important;font-size:16px!important;margin:0!important}
body .page[data-panel="people"] .staff-search-count{display:block;margin-top:6px;font-size:12px}
body .page[data-panel="people"] .staff-card-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
body .page[data-panel="people"] .staff-member-card{position:relative!important;isolation:isolate;overflow:hidden;min-width:0!important;min-height:0!important;padding:12px!important;gap:0!important;border:1px solid #dfd8c9!important;border-radius:14px!important;background:#faf7f0!important;box-shadow:0 3px 10px #17203309!important}
body .page[data-panel="people"] .staff-card-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;z-index:-1;pointer-events:none}
body .page[data-panel="people"] .staff-card-main{display:block!important;padding:0!important;min-height:0!important}
body .page[data-panel="people"] .staff-card-copy{min-width:0!important;padding:0!important}
body .page[data-panel="people"] .staff-card-name{font-size:19px!important;line-height:1.35!important;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px!important;overflow-wrap:anywhere;color:#14253d!important}
body .page[data-panel="people"] .staff-card-role,body .page[data-panel="people"] .staff-card-department,body .page[data-panel="people"] .staff-card-phone{font-size:13px!important;line-height:1.5!important;color:#25374b!important;margin:2px 0!important;overflow-wrap:anywhere}
body .page[data-panel="people"] .staff-card-footer{display:flex!important;flex-wrap:wrap;gap:4px!important;margin-top:8px!important;padding:6px 0 0!important;font-size:12px!important;background:transparent!important}
body .page[data-panel="people"] .staff-card-footer small{flex-basis:100%;font-size:10px!important;overflow-wrap:anywhere;white-space:normal!important}
body .page[data-panel="people"] .staff-card-last-online{font-size:11px!important;gap:0 3px!important;line-height:1.4}
body .page[data-panel="people"] .staff-card-last-online time{white-space:normal}
body .page[data-panel="people"] .staff-card-actions{margin-top:8px!important;padding:0!important}
body .page[data-panel="people"] .staff-card-actions button{width:100%!important;min-height:38px!important;padding:6px!important;font-size:14px!important;background:rgba(255,255,255,.82)!important}
@media(max-width:767px){body [data-modal="staff-create"] input,body [data-modal="staff-create"] select,body [data-modal="staff-create"] textarea,body .page[data-panel="people"] input{font-size:16px!important}}

body .page[data-panel="people"] .staff-floating-search{position:relative;height:60px;top:auto}
body .page[data-panel="people"] .staff-card-phone,body .page[data-panel="people"] .staff-card-footer small{width:auto!important;max-width:none!important;word-break:normal!important}
body .page[data-panel="people"] .staff-card-footer small{display:block!important;flex:0 0 100%!important}
body .page[data-panel="people"] .staff-card-actions button{color:#26394e!important}

body > input[data-staff-search].is-floating{box-sizing:border-box;height:44px;min-height:44px;font-size:16px!important;border:1px solid #ded9ce;border-radius:10px;padding:8px 12px;background:#fff;color:#172033;}

body .notebook-back-top.people-back-top{left:16px;right:auto;z-index:10000;bottom:calc(100px + env(safe-area-inset-bottom))}
body .page[data-panel="people"] .staff-card-phone{max-width:100%!important;white-space:nowrap!important;font-size:12px!important}

body [data-staff-editor-avatar].has-photo [data-staff-editor-initial]{display:none!important}
body [data-staff-editor-avatar]{position:relative;overflow:hidden!important;flex-shrink:0}
body [data-staff-editor-photo][hidden]{display:none!important}
@media(max-width:767px){
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;grid-template-rows:auto auto auto auto;gap:5px 12px!important;padding:14px 16px!important;align-items:center!important}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo{grid-column:1!important;grid-row:1/4!important;width:76px!important;height:76px!important;border-radius:16px!important;margin:0!important}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo img{position:absolute;inset:0;width:100%!important;height:100%!important;border-radius:16px!important;object-fit:cover}
body .mobile-modal[data-modal="staff-create"] [data-staff-editor-name]{grid-column:2;grid-row:1;align-self:center!important;font-size:20px!important;line-height:1.3!important;margin:0!important;overflow-wrap:anywhere}
body .mobile-modal[data-modal="staff-create"] .staff-editor-role-pill{grid-column:2;grid-row:2;justify-self:start}
body .mobile-modal[data-modal="staff-create"] .staff-editor-status{grid-column:2;grid-row:3;margin:0!important}
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload{grid-column:1/-1;grid-row:4;display:flex;align-items:center;gap:10px;margin:7px 0 0!important;min-width:0}
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload button{flex:0 0 auto;min-height:40px;padding:8px 14px;border:1px solid #c6a364;border-radius:10px;background:#fffaf0;color:#77551c;font-size:14px;font-weight:700}
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload small{font-size:12px;line-height:1.5;color:#78818c}
body .mobile-modal[data-modal="staff-create"] .staff-editor-nav{grid-column:1/-1;grid-row:5;margin-top:8px!important}
}

@media(max-width:767px){
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header{display:flex!important;flex-direction:column;align-items:stretch!important;gap:10px;padding:14px 16px!important;min-height:0!important;height:auto!important}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header>div:first-child{padding-right:0!important}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header h2{font-size:20px!important;white-space:normal!important}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions{position:static!important;display:flex!important;justify-content:flex-end;flex-wrap:wrap;gap:6px}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions button{min-height:40px!important;height:40px!important}
}

/* Desktop-only personnel density; keep mobile two-column cards unchanged. */
@media(min-width:900px){
body .page[data-panel="people"] .staff-card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;gap:12px!important;align-items:stretch}
body .page[data-panel="people"] .staff-member-card{max-width:320px;width:100%;box-sizing:border-box;display:flex!important;flex-direction:column;padding:14px!important}
body .page[data-panel="people"] .staff-card-name{font-size:18px!important}
body .page[data-panel="people"] .staff-card-actions{margin-top:auto!important;padding-top:10px!important}
body .page[data-panel="people"] .staff-card-background{object-position:center;opacity:.32}
}

@media(min-width:900px){
body .page[data-panel="people"]>.hy-staging{box-sizing:border-box;width:100%;max-width:520px;justify-self:start;align-self:start;padding:16px;margin:16px 0;border-radius:12px}
body .page[data-panel="people"]>.hy-staging h3{font-size:16px;margin:0 0 8px}
body .page[data-panel="people"]>.hy-staging button{font-size:14px;padding:7px 12px;margin:4px 0;min-height:36px;line-height:20px}
body .page[data-panel="people"]>.hy-staging>div[hidden]{display:none!important}
body .page[data-panel="people"]>.hy-staging>div:not([hidden]){max-width:100%}
}

/* Mobile personnel photo cards: readable frosted caption, photo stays clear. */
body .page[data-panel="people"] .staff-photo-caption,
body .page[data-panel="people"] .staff-photo-placeholder { display:none; }
@media(max-width:899px){
  body .page[data-panel="people"] .staff-member-card{height:clamp(212px,59vw,280px)!important;padding:0!important;border-radius:12px!important;box-shadow:0 3px 9px #44352426!important}
  body .page[data-panel="people"] .staff-card-main{position:static!important}
  body .page[data-panel="people"] .staff-card-background{opacity:1!important;object-fit:cover;object-position:center 25%;z-index:-1}
  body .page[data-panel="people"] .staff-card-copy,
  body .page[data-panel="people"] .staff-card-footer,
  body .page[data-panel="people"] .staff-card-last-online,
  body .page[data-panel="people"] .staff-card-actions{display:none!important}
  body .page[data-panel="people"] .staff-photo-caption{display:grid;gap:3px;position:absolute;inset:auto 5px 5px;box-sizing:border-box;padding:8px 8px 7px;border:1px solid #ffffffa8;border-radius:9px;background:rgba(255,249,238,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#1d3041;box-shadow:0 2px 8px #342a1926}
  body .page[data-panel="people"] .staff-photo-heading{display:flex;align-items:center;flex-wrap:wrap;gap:3px 5px;min-width:0;margin-bottom:2px}
  body .page[data-panel="people"] .staff-photo-name{display:block;padding:0!important;margin:0!important;min-height:24px!important;min-width:0!important;max-width:100%;width:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#142b3d!important;font-size:16px!important;font-weight:800!important;line-height:1.4!important;text-align:left;overflow-wrap:anywhere;cursor:pointer}
  body .page[data-panel="people"] .staff-photo-name:focus-visible{outline:2px solid #ae853b!important;outline-offset:2px}
  body .page[data-panel="people"] .staff-photo-role{font-size:9px;line-height:1.4;padding:2px 6px;border-radius:12px;background:#e9dec8;color:#67573e;max-width:100%;overflow-wrap:anywhere}
  body .page[data-panel="people"] .staff-photo-status{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:9px;white-space:nowrap}
  body .page[data-panel="people"] .staff-photo-status .staff-status-dot{display:inline-block;width:6px;height:6px;flex:0 0 6px;margin:0}
  body .page[data-panel="people"] .staff-photo-detail{display:grid;grid-template-columns:11px minmax(0,1fr);gap:5px;font-size:10px;line-height:1.4;overflow-wrap:anywhere}
  body .page[data-panel="people"] .staff-photo-placeholder{display:grid;place-items:center;height:62%;font-size:42px;font-weight:700;color:#9c845e;background:linear-gradient(135deg,#eee4d4,#f9f5ed)}
}

@media(max-width:899px){
body .page[data-panel="people"] .staff-member-card .staff-photo-caption{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;grid-template-columns:none!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-heading{display:flex!important;flex-direction:row!important;align-items:center!important;gap:3px 5px!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-detail{display:grid!important;grid-template-columns:11px minmax(0,1fr)!important;gap:5px!important;margin:0!important;font-size:10px!important;line-height:1.4!important;font-weight:400!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-detail span{font-size:10px!important;font-weight:400!important;line-height:1.4!important;min-width:0!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-role,body .page[data-panel="people"] .staff-member-card .staff-photo-status{font-size:9px!important;font-weight:500!important;line-height:1.4!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-status{display:inline-flex!important;margin-left:auto!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-status .staff-status-dot{display:inline-block!important;background:#b18a45}
body .page[data-panel="people"] .staff-member-card .staff-photo-status .staff-status-dot.online{background:#20bb65}
}

/* Keep the portrait above the compact caption, matching the reference cards. */
@media(max-width:899px){
body .page[data-panel="people"] .staff-member-card .staff-card-background{height:calc(100% - 66px)!important;object-position:center!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-caption{padding:5px 6px!important;gap:2px!important;border-radius:7px!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-heading{gap:2px 4px!important;margin-bottom:0!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-name{font-size:14px!important;min-height:20px!important;line-height:20px!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-role{font-size:8px!important;padding:1px 5px!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-status{font-size:8px!important;gap:3px!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-detail,body .page[data-panel="people"] .staff-member-card .staff-photo-detail span{font-size:9px!important;line-height:12px!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-status .staff-status-dot{border-radius:50%!important}
}

@media(max-width:899px){
body .page[data-panel="people"] .staff-member-card .staff-photo-caption{margin:0!important;padding-top:2px!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-heading{margin:0!important;padding:0!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-name{height:auto!important;min-height:20px!important;line-height:20px!important}
}

/* Desktop shares the photo-caption treatment; retain original in-flow sizing. */
@media(min-width:900px){
body .page[data-panel="people"] .staff-card-copy,
body .page[data-panel="people"] .staff-card-footer,
body .page[data-panel="people"] .staff-card-last-online,
body .page[data-panel="people"] .staff-card-actions{visibility:hidden;pointer-events:none}
body .page[data-panel="people"] .staff-card-main{position:static!important}
body .page[data-panel="people"] .staff-member-card .staff-card-background{height:calc(100% - 70px)!important;opacity:1;object-position:center}
body .page[data-panel="people"] .staff-member-card .staff-photo-caption{display:flex!important;flex-direction:column;align-items:stretch;position:absolute;inset:auto 6px 6px;box-sizing:border-box;padding:2px 8px 6px;margin:0;gap:2px;border:1px solid #ffffffa8;border-radius:9px;background:rgba(255,249,238,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#1d3041;box-shadow:0 2px 8px #342a1926}
body .page[data-panel="people"] .staff-member-card .staff-photo-heading{display:flex!important;align-items:center;flex-wrap:wrap;gap:3px 6px;margin:0;padding:0}
body .page[data-panel="people"] .staff-member-card .staff-photo-name{display:block;width:auto!important;height:auto!important;min-height:24px!important;min-width:0!important;max-width:100%;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#142b3d!important;font-size:17px!important;font-weight:800!important;line-height:24px!important;text-align:left;overflow-wrap:anywhere;cursor:pointer}
body .page[data-panel="people"] .staff-photo-name:focus-visible{outline:2px solid #ae853b!important;outline-offset:2px}
body .page[data-panel="people"] .staff-member-card .staff-photo-role{font-size:10px!important;line-height:1.4;padding:1px 6px;border-radius:12px;background:#e9dec8;color:#67573e;max-width:100%;overflow-wrap:anywhere}
body .page[data-panel="people"] .staff-member-card .staff-photo-status{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10px!important;white-space:nowrap}
body .page[data-panel="people"] .staff-photo-status .staff-status-dot{display:inline-block!important;width:6px;height:6px;flex:0 0 6px;margin:0;border-radius:50%;background:#b18a45}
body .page[data-panel="people"] .staff-photo-status .staff-status-dot.online{background:#20bb65}
body .page[data-panel="people"] .staff-member-card .staff-photo-detail{display:grid!important;grid-template-columns:12px minmax(0,1fr)!important;gap:5px;margin:0!important;overflow-wrap:anywhere}
body .page[data-panel="people"] .staff-member-card .staff-photo-detail span{font-size:11px!important;line-height:14px!important;font-weight:400!important;min-width:0}
body .page[data-panel="people"] .staff-member-card .staff-photo-placeholder{position:absolute;inset:0 0 76px;display:grid;place-items:center;font-size:48px;font-weight:700;color:#9c845e;background:linear-gradient(135deg,#eee4d4,#f9f5ed);z-index:-1}
}

body .page[data-panel="people"] .staff-member-card .staff-photo-edit-area{position:absolute!important;inset:0!important;z-index:2!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:inherit!important;background:transparent!important;box-shadow:none!important;cursor:pointer}
body .page[data-panel="people"] .staff-member-card .staff-photo-edit-area:focus-visible{outline:2px solid #ae853b!important;outline-offset:2px}

body .page[data-panel="people"] .staff-member-card .staff-photo-edit-area{inset:0 0 auto!important;height:calc(100% - 76px)!important;border-radius:12px 12px 0 0!important}
body .page[data-panel="people"] .staff-member-card .staff-photo-caption{z-index:3;cursor:default}
body .page[data-panel="people"] .staff-member-card .staff-photo-name{cursor:default}

@media(max-width:899px){body .page[data-panel="people"] .staff-member-card .staff-photo-name{font-size:17px!important;line-height:24px!important;min-height:24px!important}}
@media(min-width:900px){body .page[data-panel="people"] .staff-member-card .staff-photo-name{font-size:20px!important;line-height:28px!important;min-height:28px!important}}

body .page[data-panel="people"] .staff-member-card .staff-photo-name{font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif!important;font-weight:700!important;letter-spacing:.035em}

/* Staff editor: one save/exit footer and larger mobile portrait. */
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload { align-items:end; text-align:right; }
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload button { margin-left:auto; }
@media(max-width:767px){
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar { grid-template-columns:112px minmax(0,1fr)!important; }
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo { width:112px!important;height:112px!important; }
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload { flex-direction:row-reverse;justify-content:flex-start;align-items:center; }
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload small { text-align:left;flex:1; }
}

/* Keep the portrait upload action in the upper right of the profile block. */
@media(max-width:767px){
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar{position:relative;grid-template-rows:auto auto auto auto!important;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload{display:contents;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload button{position:absolute;top:14px;right:16px;margin:0;font-size:12px;padding:8px 10px;}
body .mobile-modal[data-modal="staff-create"] [data-staff-editor-name]{padding-right:90px;min-height:40px;box-sizing:border-box;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload small{grid-column:1/-1;grid-row:4;margin-top:7px;}
}

@media(max-width:767px){
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar{grid-template-columns:144px minmax(0,1fr)!important;}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo{width:144px!important;height:144px!important;}
body .mobile-modal[data-modal="staff-create"] [data-staff-editor-name]{padding-right:0;padding-top:44px;min-height:0;}
}

/* Compact personnel editor heading and actions on one aligned row. */
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:12px;padding:14px 16px!important;min-height:68px!important;height:auto!important;}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header>div:first-child{min-width:0;padding-right:0!important;}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header h2{margin:0!important;line-height:1.3!important;}
body .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions{position:static!important;flex:0 0 auto;display:flex!important;align-items:center!important;margin:0!important;}

body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row{display:flex;align-items:center;gap:6px;min-width:0;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row [data-staff-editor-name]{margin:0!important;padding:0!important;min-height:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row .staff-editor-role-pill{flex:0 0 auto;margin:0!important;white-space:nowrap;}
@media(max-width:767px){
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row{grid-column:2;grid-row:1/4;align-self:center;padding-top:24px;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row [data-staff-editor-name]{font-size:18px!important;}
}

/* Name shares the upload button row; role sits below the name. */
@media(max-width:767px){
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;grid-column:2;grid-row:1/4;align-self:start;padding-top:0;padding-right:88px;gap:8px;min-height:70px;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row [data-staff-editor-name]{min-height:40px;display:flex;align-items:center;max-width:100%;white-space:normal;overflow:visible;overflow-wrap:anywhere;font-size:18px!important;line-height:1.3!important;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row .staff-editor-role-pill{align-self:flex-start;}
}

@media(max-width:379px){
body .mobile-modal[data-modal="staff-create"] .staff-editor-identity-row{grid-column:1/-1;grid-row:4;padding-top:0;margin-top:8px;}
body .mobile-modal[data-modal="staff-create"] .staff-editor-photo-upload button{position:static;grid-column:1/-1;grid-row:4;justify-self:end;align-self:start;margin-top:8px;}
}