/* Calm: fewer boxes and borders, quieter chips, smaller headings, folding settings rows, slimmer headers. Loaded last on purpose. */
.card { border-color: transparent; box-shadow: none; }
.page { gap: var(--space-5); }
h1 { font-size: calc(24px * var(--ts)); line-height: 30px; }
.page-head p.muted { font-size: var(--fs-md); }
.chip { background: transparent; border-color: var(--color-border); color: var(--color-text-2); font-size: var(--fs-sm); }
.chip.accent { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-text); }
.section-title { font-size: var(--fs-xs); letter-spacing: .08em; color: var(--color-text-3); }
.conv, .frow.big, .gcard { border-color: transparent; }
.conv:hover, .frow.big:hover, .gcard:hover { border-color: var(--color-border); }

/* ---- Settings: one line per setting, the card opens when you click it ---- */
.settings-layout { grid-template-columns: 196px minmax(0, 1fr); gap: var(--space-6); }
.settings-panel { gap: var(--space-3); }
.card.fold { padding: 0; gap: 0; }
.fold-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-4); padding: 15px 18px; background: none; border: 0; color: var(--color-text); font: inherit; font-weight: 650; text-align: left; cursor: pointer; border-radius: inherit; }
.fold-head:hover { background: var(--color-hover-2); }
.fold-head svg.fold-chev, .fold-head > svg:last-child { flex: none; color: var(--color-text-3); transition: transform .25s var(--ease); }
.fold.open > .fold-head svg.fold-chev, .fold.open > .fold-head > svg:last-child { transform: rotate(180deg); }
.fold-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 2px 18px 18px; }
.fold-body[hidden] { display: none; }
.fold-body > p.muted.small:first-child { margin-top: -4px; }

/* picture + banner: two compact cards side by side */
.id-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.id-pair .pic-card, .id-pair .banner-card { padding: 14px; gap: var(--space-4); }
.id-pair .pic-meta p { display: none; }
.id-pair .banner-preview { height: 64px; }
.id-pair .avatar-preview .avatar { width: 56px; height: 56px; font-size: 22px; }
@media (max-width: 1100px) { .id-pair { grid-template-columns: 1fr; } }

/* the friends list is hidden on Settings: it only squeezes the form */
.shell:has(.settings-page) { grid-template-columns: 248px minmax(0, 1fr); }
.shell:has(.settings-page) .friends-panel { display: none; }

/* ---- Simple mode: explanations disappear, only the controls stay ---- */
html.simple .page-head p.muted, html.simple .field-msg, html.simple .fold-body > p.muted.small, html.simple .srow-text > span.muted, html.simple .scard p.muted.small { display: none; }

/* ---- sidebar: four main links, the rest under "More" ---- */
.nav-more { display: flex; flex-direction: column; gap: 2px; }
.nav-more[hidden] { display: none; }
.nav-fold { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.nav-fold .chev { margin-left: auto; transition: transform .25s var(--ease); }
.nav-fold[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---- top bar: search, bell, one menu ---- */
.topbar-menu { position: fixed; z-index: 95; min-width: 220px; padding: 4px; background: var(--color-pop); border: 1px solid var(--color-line-2); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.topbar-menu button, .topbar-menu a { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.topbar-menu button:hover, .topbar-menu a:hover { background: var(--color-hover); }

/* ---- group header: one line, details fold away ---- */
.ghead.slim { padding: var(--space-4) var(--space-6); gap: var(--space-2); }
.ghead.slim .top h1 { font-size: calc(20px * var(--ts)); line-height: 26px; }
.ghead-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.ghead-more { align-self: flex-start; background: none; border: 0; padding: 2px 0; color: var(--color-text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ghead-more:hover { color: var(--color-text); }
.ghead-more svg { transition: transform .25s var(--ease); }
.ghead-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ghead-details { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.ghead-details[hidden] { display: none; }
.chat-tools { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 899px) { .ghead.slim { padding: var(--space-3) var(--space-4); } }

.nav-link[hidden] { display: none !important; }
.nav-main > .nav-fold { color: var(--color-text-2); }
.shell.no-friends { grid-template-columns: 248px minmax(0, 1fr); }
.shell.no-friends .friends-panel { display: none; }
@media (min-width: 900px) and (max-width: 1180px) { .shell.no-friends { grid-template-columns: 220px minmax(0, 1fr); } }