/* Account and moderation pages of the live site (makeover, owner 2026-10-25; mockup artboards SignIn, Register,
   Account, Admin, Message): what only these pages use, on top of site.css. Loaded through the head block by
   live/templates/account/*, worlds/account.html, admin/frame.html and live/message.html. */

.ui-page .ui-check { font-weight: normal; }

/* ---- Log in, register, choose a name: one narrow card on the ground ---- */
.acct-auth { width: 100%; max-width: 460px; margin: 0 auto; }
.acct-auth-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--ui-pad-y) var(--ui-pad-x) 6px; text-align: center; }
.acct-auth-head img { width: 40px; height: 37px; image-rendering: pixelated; }
.acct-auth-head p { color: var(--ui-muted); }
.acct-auth-body { display: flex; flex-direction: column; gap: 14px; padding: var(--ui-pad-y) var(--ui-pad-x); }
.acct-auth-foot { padding: 14px var(--ui-pad-x); border-top: 1px solid var(--ui-soft-line); text-align: center; font-size: 14px; color: var(--ui-muted); }
.acct-auth .ui-btn-go { width: 100%; }  /* the sign-in page's main action: large (site.css) */
.acct-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
/* Discord's own blue on the stone button's edge, bevel and hover (site.css section 6) */
.acct-discord { width: 100%; height: var(--ui-btn-lg); min-height: var(--ui-btn-lg); gap: 10px; background: #5865f2; text-shadow: 1px 1px 0 #2a2f8a; }
.acct-discord-note { margin-top: 6px; text-align: center; font-size: 13px; color: var(--ui-muted); }
.acct-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ui-muted); }
.acct-or::before, .acct-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ui-soft-line); }
.acct-agree { max-height: 150px; overflow-y: auto; padding: 10px 12px; border: 2px solid var(--ui-block-edge); border-radius: 8px; background: #fff; font-size: 13px; color: #3d4852; }  /* as a field */
.acct-agree p + p { margin-top: 8px; }
.acct-turnstile { display: flex; justify-content: center; }

.acct-split { justify-content: space-between; }
.acct-flat { margin: 0; }

/* ---- Signed-in pages: the account card in the side column ---- */
.acct-me { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; }
.acct-me img { width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--ui-line); image-rendering: pixelated; }
.acct-me-name { font-size: 15px; font-weight: bold; overflow-wrap: anywhere; }
.acct-logout { margin: 0; padding: 0 8px 10px; }
.acct-logout .ui-btn { width: 100%; justify-content: flex-start; }
.acct-slots { display: inline-flex; gap: 3px; vertical-align: -2px; margin-right: 6px; }
.acct-slots span { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #9fb4c8; background: #fff; }
.acct-slots span.used { border-color: var(--ui-go); background: var(--ui-go); }

/* My worlds: one row per world, its edit form opening under it */
.ui-list > .acct-world { align-items: flex-start; }  /* a row of .ui-list; its edit form opens under it */
.acct-world-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; font-weight: bold; overflow-wrap: anywhere; }
.acct-world-title small { font-size: 13px; font-weight: normal; color: var(--ui-muted); }
.acct-world details { flex: 1 1 100%; }
.acct-world summary { list-style: none; }  /* Edit: a stone button (.ui-btn in the template) */
.acct-world summary::-webkit-details-marker { display: none; }
.acct-world details[open] summary { margin-bottom: 12px; }
.acct-world details .ui-form { padding: 4px 0 0; }
.acct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.acct-remove { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; font-size: 13px; }

/* ---- Moderation ---- */
.adm-counts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.adm-count { display: flex; flex-direction: column; gap: 4px; padding: var(--ui-pad-y) var(--ui-pad-x); }
.adm-count dt { font-size: 13px; font-weight: normal; color: var(--ui-muted); }
.adm-count dd { margin: 0; font-size: 18px; font-weight: bold; color: var(--ui-text); }
.ui-list > .adm-item { flex-direction: column; align-items: stretch; gap: 10px; }  /* a row of .ui-list, its parts stacked */
.adm-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.adm-item-head b { font-size: 15px; overflow-wrap: anywhere; }
.adm-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.adm-inline .ui-input { width: 260px; max-width: 100%; flex: 1 1 auto; }
.adm-inline select.ui-input { width: auto; flex: 0 0 auto; }
.adm-inline .adm-days { flex: 0 0 5.5em; }
.adm-search { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; }
.adm-search .ui-find { flex: 0 1 300px; }

/* ---- Message page ---- */
.msg-card { width: 100%; max-width: 560px; margin: 0 auto; padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.msg-card .ui-row { justify-content: center; }

@media (max-width: 600px) {
  .acct-auth-head, .acct-auth-body { padding-left: 18px; padding-right: 18px; }
  .acct-two { grid-template-columns: minmax(0, 1fr); }
  .acct-remove { justify-content: flex-start; }
  .acct-me { padding: 10px 12px 4px; }
  .ui-table-wrap .adm-inline { flex-wrap: nowrap; }
  /* touch targets: the account and moderation menus and Log out at least 44 px tall */
  .ui-menu-col .ui-menu a, .acct-logout .ui-btn { min-height: 44px; }
}