/* ==========================================================================
   PEEKWELL PORTAL · DASHBOARD, ACCOUNT AND STAFF PAGES
   Tokens and design-system components only. The onboarding story has its own file.
   ========================================================================== */

/* ---- Sidebar: buttons that sit with the links ---------------------------- */
.pw-sidebar__btn { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: 500 var(--fs-sm)/1.2 var(--font-ui); text-align: left; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.pw-sidebar__btn .ph, .pw-sidebar__btn .ph-fill { font-size: 18px; color: var(--text-3); }
.pw-sidebar__btn:hover { color: var(--text); background: var(--line-soft); }
.pw-sidebar__btn .theme-toggle__on { display: none; color: var(--brass-400); }
:root[data-theme="dark"] .pw-sidebar__btn .theme-toggle__on { display: inline-block; }
:root[data-theme="dark"] .pw-sidebar__btn .theme-toggle__off { display: none; }
.pw-sidebar__btn--lamp { margin-top: auto; }   /* sits at the bottom, just above Peeky */
.pw-sidebar__btn--lamp + .pw-sidebar__foot { margin-top: 0; }

/* ---- Impersonation banner on public-layout pages ------------------------ */
.public-impersonation { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: var(--s-4) auto 0; padding: 0 var(--gutter); }

/* ---- Dashboard ------------------------------------------------------------ */
.dash-section { display: grid; gap: var(--s-4); }
.dash-section__head { display: flex; align-items: center; gap: var(--s-3); }
.dash-section__head h2 { margin: 0; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-4); }
.dash-co { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.dash-co__head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.dash-co__name { display: grid; gap: 2px; min-width: 0; }
.dash-co__name h3 { margin: 0; overflow-wrap: anywhere; }
.dash-co__name a { color: inherit; text-decoration: none; }
.dash-co__name a:hover { text-decoration: underline; }
.dash-co__name .pw-small { overflow-wrap: anywhere; }
.dash-co__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dash-co__empty { margin: 0; color: var(--text-2); }
.dash-co__open { justify-self: start; }
.dash-ctx { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.dash-ctx__item { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-recessed); min-width: 0; }
.dash-ctx__where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.dash-invites .rows__who .pw-small { color: var(--text-2); }
.dash-invites__hint { max-width: 42ch; }

/* ---- Account -------------------------------------------------------------- */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.acct-side { display: grid; gap: var(--s-6); min-width: 0; }
.acct-card { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.acct-card > .pw-card__header { margin-bottom: 0; }
.acct-card p { margin: 0; }
.acct-who { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.acct-who__avatar { width: 64px; height: 64px; font-size: var(--fs-lg); flex-shrink: 0; }
.acct-who__avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-who__text { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.acct-who__text b, .acct-who__text .pw-small { overflow-wrap: anywhere; }
.acct-facts { margin: 0; display: grid; gap: var(--s-3); }
.acct-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.acct-facts dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.acct-facts dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.acct-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.acct-story { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.acct-story > div { display: grid; gap: var(--s-2); justify-items: start; }
.acct-story__art { width: 72px; filter: drop-shadow(0 6px 10px rgba(31, 36, 48, 0.16)); }
.acct-danger { border-color: var(--brick-200); }
:root[data-theme="dark"] .acct-danger { border-color: color-mix(in srgb, var(--brick-500) 55%, transparent); }
.acct-danger form { margin: 0; }
.acct-blockers, .acct-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base); }
.acct-confirm { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-6); align-items: start; max-width: 760px; }
.acct-confirm__art { width: 120px; filter: drop-shadow(0 6px 10px rgba(31, 36, 48, 0.16)); }
.acct-confirm p { margin: 0; }
.acct-manage { max-width: 640px; display: grid; gap: var(--s-4); }
.acct-manage h1, .acct-manage h2, .acct-manage p { margin: 0; }
.acct-manage .pw-tag { margin-left: var(--s-1); white-space: nowrap; }

/* ---- Staff ---------------------------------------------------------------- */
.staff-tabs { overflow-x: auto; scrollbar-width: none; }
.staff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.staff-stat { color: inherit; text-decoration: none; transition: box-shadow var(--t-fast), transform var(--t-fast); }
a.staff-stat:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.staff-stat .pw-stat__value { font-size: var(--fs-2xl); }
.staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
.staff-mix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.staff-counts { margin: 0; display: grid; gap: var(--s-2); align-content: start; }
.staff-counts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.staff-counts > div:last-child { border-bottom: 0; }
.staff-counts dt { font-size: var(--fs-sm); color: var(--text-2); }
.staff-counts dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); }
.staff-counts a { color: var(--text); }
.staff-audit .pw-mono { font-size: var(--fs-xs); }
.staff-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.staff-search .pw-field { margin: 0; }
.staff-search__q { flex: 1 1 260px; }
.staff-chips { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.staff-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); }
.staff-actions form { margin: 0; }
/* Deleting sits apart from the everyday actions, so it is never one slip away from "View as". */
.staff-actions .staff-actions__danger { margin-left: var(--s-4); }
.staff-pages { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }

@media (max-width: 1100px) {
  .staff-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .acct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .staff-mix { grid-template-columns: 1fr; }
  .staff-actions { justify-content: flex-start; }
  .staff-actions .staff-actions__danger { margin-left: 0; flex-basis: 100%; padding-top: var(--s-2); border-top: 1px dashed var(--line); }
  .acct-confirm { grid-template-columns: 1fr; }
  .acct-confirm__art { width: 96px; }
  .acct-facts > div { grid-template-columns: 1fr; gap: 2px; }
}