/* Shared phone/tablet support; the established desktop design stays intact. */
@media (max-width: 760px) {
  body { overflow-wrap: anywhere; }
  .langbtn, .menu-btn { min-height: 44px; font-size: 14px; letter-spacing: .04em; }
  .menu-btn { padding: 8px 12px; gap: 8px; text-indent: 0; }
  .menu-panel { min-width: 0; width: min(280px, calc(100vw - 24px)); max-height: 65dvh; overflow-y: auto; overscroll-behavior: contain; }
  .menu-panel a { min-height: 44px; letter-spacing: .04em; }
  .preview-note { width: calc(100% - 24px); max-width: 100%; margin: 0 auto 12px; line-height: 1.5; }
  button, a, input, textarea, select { touch-action: manipulation; }
  input, textarea, select { max-width: 100%; font-size: 16px; }
  .btnp, .btng, .fchip, .lvl, .mem, .mclose, .toggle { min-height: 44px; }
  .btng, .btnp { font-size: 14px; letter-spacing: .04em; text-indent: 0; }
  .fchip, .lvl { font-size: 14px; padding: 8px 12px; }
  .overlay { padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)); }
  .modal { padding: 24px 16px 16px; overscroll-behavior: contain; }
  .mclose { min-width: 44px; top: 4px; right: 4px; }
  .modalbtns, .toolbar { flex-wrap: wrap; }
  .modal h3 { padding-right: 32px; letter-spacing: .08em; }
  .field small.hint { font-size: 14px; }
  body[data-page="blog"] main,
  body[data-page="resources"] main,
  body[data-page="login"] main { width: 100%; padding: 24px 12px 32px; min-height: 0; }
  .title { font-size: 32px; letter-spacing: .12em; }
  .lead { font-size: 16px; letter-spacing: .04em; margin-bottom: 24px; }
  .post, .article, .rcard, .notice { min-width: 0; padding: 20px 16px; }
  .rgrid { grid-template-columns: minmax(0, 1fr); }
  .rtop { flex-wrap: wrap; }
  .pager { flex-wrap: wrap; }
  .pager button { min-height: 44px; }
  body[data-page="login"] .panel { width: 100%; padding: 24px 18px; }
  body[data-page="login"] .row { flex-wrap: wrap; }

  /* Homepage typography and cards should fit a narrow phone. */
  body[data-page="index"] .hero { min-height: 70svh; padding: 40px 16px 48px; }
  body[data-page="index"] .hero h1 { font-size: clamp(32px, 8.5vw, 58px); letter-spacing: .08em; text-indent: .08em; }
  body[data-page="index"] .hero p { font-size: 16px; letter-spacing: .06em; }
  body[data-page="index"] .hero .btn { max-width: 100%; padding: 12px 22px; letter-spacing: .08em; text-indent: 0; }
  body[data-page="index"] main section { padding: 28px 12px; }
  body[data-page="index"] .panel { padding: 24px 18px; }
  body[data-page="index"] h2 { letter-spacing: .08em; }
  body[data-page="index"] .rows li { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  /* A bounded chat shell, including the visible area above the keyboard. */
  body[data-page="community"] .page { position: fixed; left: 0; right: 0; top: var(--community-viewport-top, 0px); height: var(--community-viewport-height, 100dvh); }
  body[data-page="community"] .userchip { min-height: 44px; padding: 4px; }
  body[data-page="community"] .userchip span.n { display: none; }
  body[data-page="community"] .app { padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px); }
  body[data-page="community"] .preview-note { font-size: 14px; padding: 8px 10px; }
  .tabs { width: 100%; max-width: 420px; gap: 2px; margin-bottom: 8px; }
  .tab { flex: 1; min-width: 0; min-height: 44px; padding: 6px 8px; font-size: 14px; letter-spacing: .02em; }
  .tab small { font-size: 12px; }
  .chat { gap: 0; }
  .chanbar { padding: 6px; gap: 4px; }
  .chan { min-height: 44px; padding: 6px 9px; font-size: 14px; letter-spacing: 0; }
  .chan em { margin-left: 4px; }
  .chanbar .spacer { display: none; }
  .memtoggle { margin-left: auto; padding: 6px 9px; }
  .msgs { padding: 12px 8px; gap: 12px; overscroll-behavior: contain; }
  .empty { padding: 12px; font-size: 14px; }
  .empty small { font-size: 14px; }
  .msg { gap: 8px; }
  .mbody { max-width: calc(100% - 48px); }
  .bubble { padding: 8px 12px; font-size: 16px; }
  .composer { padding: 8px; gap: 6px; }
  .composer textarea { max-height: 100px; padding: 10px 12px; border-radius: 16px; }
  .composer .btnp { flex: none; min-height: 46px; padding: 10px 12px; letter-spacing: 0; text-indent: 0; }
  .members { top: 56px; bottom: 0; border-radius: 8px; }
  .tcard { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 14px 10px; }
  .tmeta .who { max-width: 100%; flex-wrap: wrap; }
  .settings .glass, .post, .replybox { padding: 18px 12px; }
  .picrow { flex-wrap: wrap; }
  .sw { width: 44px; height: 44px; }
  .wiz { padding: 22px 16px; }
  .savebar { flex-wrap: wrap; }
  body[data-page="community"].keyboard-open header,
  body[data-page="community"].keyboard-open .preview-note { display: none; }
  body[data-page="community"].keyboard-open .overlay { top: var(--community-viewport-top, 0px); bottom: auto; height: var(--community-viewport-height, 100dvh); }
}
@media (max-width: 380px) {
  .members { top: 104px; }
  .chanbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chan { padding: 6px 4px; }
  .memtoggle { grid-column: 1 / -1; justify-self: end; }
  .chan em { font-size: 12px; }
}
@media (hover: none) and (pointer: coarse) {
  .msg .del { opacity: .85; min-height: 44px; padding: 4px 8px; font-size: 14px; }
}
@media (max-width: 760px) and (max-height: 500px) {
  body[data-page="community"] .preview-note { display: none; }
  body[data-page="community"] .tab small { display: none; }
}
@media (max-width: 760px) {
  body[data-page="community"].keyboard-open .memtoggle { display: none; }
  body[data-page="community"].keyboard-open .tab small { display: none; }
}
/* Language changes must not reflow the community's navigation controls. */
@media (max-width: 760px) {
  body[data-page="community"] .tab { white-space: nowrap; }
  body[data-page="community"] .chanbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 80px;
    align-items: center;
    gap: 4px;
  }
  body[data-page="community"] .chan { min-width: 0; min-height: 58px; padding: 6px 4px; white-space: nowrap; line-height: 1.5; }
  body[data-page="community"] .chan em { display: block; margin: 0; font-size: 12px; }
  body[data-page="community"] .memtoggle { grid-column: 3; width: 80px; margin: 0; padding: 6px 4px; white-space: nowrap; }
  body[data-page="community"] .members { top: 72px; }
  body[data-page="community"] .composer .btnp { width: 76px; padding: 10px 8px; white-space: nowrap; }
  body[data-page="community"].keyboard-open .chanbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
}

/* Shared scroll surfaces: history, editors, panels, menus and dialogs. */
:root {--scroll-thumb:#a57796;--scroll-thumb-hover:#e3a0ba;--scroll-track:rgba(18,19,42,.22)}
* {scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
*::-webkit-scrollbar {width:8px;height:8px}
*::-webkit-scrollbar-track {background:var(--scroll-track);border-radius:999px}
*::-webkit-scrollbar-thumb {background:var(--scroll-thumb);border:2px solid transparent;background-clip:padding-box;border-radius:999px;min-height:32px}
*::-webkit-scrollbar-thumb:hover {background-color:var(--scroll-thumb-hover)}
*::-webkit-scrollbar-corner {background:transparent}
textarea::-webkit-scrollbar-track {margin-block:10px}
@media (prefers-contrast:more) {* {scrollbar-color:var(--accent) var(--sky-top)} *::-webkit-scrollbar-thumb {background-color:var(--accent)}}
@media (forced-colors:active) {* {scrollbar-width:auto;scrollbar-color:auto} *::-webkit-scrollbar-thumb {background:ButtonText} *::-webkit-scrollbar-track {background:Canvas}}

[data-account-logout][hidden] {display:none!important}
.account-preview-note {font-size:14px;color:var(--ink-soft);line-height:1.7;margin-top:20px}
.account-logout-button {font:inherit;font-size:16px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 20px;min-height:44px;cursor:pointer}


@media (max-width:760px) {
}
/* With the header hidden for typing, the app must fill the only grid row. */
@media(max-width:760px){body[data-page="community"].keyboard-open .page{grid-template-rows:minmax(0,1fr)}}