/* JDW R3J — portal-first polish. Builds on R3F + R3H + R3I. */

/* The shared shell remains compact. The fixed tool rail never joins document flow. */
.admin .workspace-main { max-width: 1210px; }
.admin .page-heading { margin-bottom: 10px; }
.admin .topbar { min-width: 0; }
.admin .topbar .top-location, .admin .topbar .top-actions { min-width: 0; }
.side-bottom { font-size: 10px; }
.side-brand { margin-bottom: 13px; }
.side-caption { letter-spacing: 1px; }
.sidebar .side-link { gap: 0; }
.account-menu > summary { white-space: nowrap; }
.account-menu > summary strong { font-size: 11px; }
.account-menu .top-session { font-size: 10px; }

/* Friendly public mascot study, entirely CSS/emoji, never dependent on a remote asset. */
.public-hero { position: relative; min-height: 292px; padding: 28px 38px; gap: 20px; }
.public-hero .hero-copy { position: relative; z-index: 1; min-width: 0; flex: 1; }
.public-hero .hero-copy p { line-height: 1.75; }
.public-characters { position: relative; width: 347px; height: 218px; flex: none; }
.character-card { position: absolute; width: 157px; height: 98px; border: 1px solid #ffffffd9; border-radius: 17px; padding: 13px 13px 10px 61px; background: #fff; box-shadow: 0 12px 28px #224c6520; display: flex; justify-content: center; flex-direction: column; gap: 3px; }
.character-card .character-icon { position: absolute; left: 14px; top: 26px; width: 37px; height: 43px; font-size: 29px; display: grid; place-items: center; }
.character-card strong { font-size: 11px; letter-spacing: 1.3px; color: #27475b; }
.character-card small { font-size: 10px; color: #6b879a; white-space: nowrap; }
.char-create { top: 5px; left: 8px; transform: rotate(-6deg); background: #ffe9ed; }
.char-learn { top: 13px; right: 7px; transform: rotate(5deg); background: #eef2ff; }
.char-explore { bottom: 4px; left: 23px; transform: rotate(5deg); background: #fff1d9; }
.char-connect { bottom: 6px; right: 0; transform: rotate(-5deg); background: #e5f5ed; }
.character-orbit { position: absolute; font-size: 39px; color: #4d99a5; opacity: .25; }
.orbit-a { left: 145px; top: 70px; }
.orbit-b { right: -12px; top: -17px; color: #ecab68; }

/* Actual capabilities only. Planned controls are text, never deceptive links. */
.admin-health { background: #fff; border: 1px solid #dbe8ee; border-radius: 11px; padding: 11px 14px 13px; margin-bottom: 10px; }
.admin-health-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.admin-health-title strong { color: #224b64; font-size: 13px; }
.admin-health-title span { color: #8a9eab; font-size: 10px; }
.admin-health-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.admin-health-list > * { min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid #e2edf1; border-radius: 8px; padding: 10px 11px; font-size: 11px; background: #fbfdff; }
.admin-health-list > a:hover { border-color: #9ac9d5; background: #f1f9fc; }
.admin-health-list > * > span { color: #355b71; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-health-list b { font-size: 9px; padding: 4px 6px; border-radius: 6px; font-weight: 700; white-space: nowrap; }
.state-ready { color: #28795a; background: #e8f6ee; }
.state-todo { color: #8c7b63; background: #f5f1e9; }

.security-audits { margin-top: 10px; }
.audit-table-scroll { max-width: 100%; overflow-x: auto; }
.audit-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
.audit-table th { color: #617e91; background: #f3f8fb; font-weight: 760; white-space: nowrap; }
.audit-table td, .audit-table th { border-bottom: 1px solid #e7eff3; padding: 9px 10px; }
.audit-table td { color: #45677d; overflow-wrap: anywhere; }
.audit-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.security-advisory { margin: 10px 0 0; border: 1px solid #f3e3c5; border-radius: 8px; background: #fffaf0; padding: 9px 11px; color: #977447; font-size: 11px; line-height: 1.5; }

@media (max-width: 1000px) {
  .public-hero { gap: 4px; padding: 25px 30px; }
  .public-characters { width: 290px; transform: scale(.84); transform-origin: center right; margin-left: -45px; }
}
@media (max-width: 760px) {
  .public-hero { flex-direction: column; align-items: flex-start; }
  .public-characters { align-self: center; transform: scale(.93); transform-origin: center center; margin: -3px 0 1px; }
  .admin-health-list { grid-template-columns: 1fr; }
  .admin .topbar .top-location > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 580px) {
  .public-hero { padding: 26px 20px 11px; min-height: 0; }
  .public-hero h1 { font-size: 29px; }
  .public-characters { width: min(290px, 100%); margin-top: 2px; margin-bottom: -4px; transform: scale(.8); height: 180px; }
  .admin-health { padding: 10px; }
  .admin-health-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .audit-table { min-width: 410px; }
  .account-menu > summary { gap: 4px; padding-left: 6px; padding-right: 6px; }
  .account-menu > summary strong { font-size: 10px; }
  .account-menu .top-session { min-width: 0; font-size: 9px; }
}
@media (max-width: 375px) {
  .public-hero { padding: 20px 16px 8px; }
  .public-characters { transform: scale(.73); }
  .top-location { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .character-card { transition: none; }
}