/* Shared layout; colors are defined only in light.css and dark.css. */
:root {
  color-scheme: light dark;
  font-family: monospace;
  --gutter: 20px;
  color: var(--base-text);
  background: var(--base);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.topbar { flex: none; padding: 12px var(--gutter); border-bottom: 1px solid var(--base-text); }
nav { display: flex; align-items: center; justify-content: space-between; }
a { color: var(--base-text); text-decoration: none; }
.topbar a { background: var(--base); color: var(--base-text); border-color: var(--base-text); }
.topbar a:focus-visible { outline: 2px solid var(--base-text); outline-offset: 5px; }
.nav-links { display: flex; align-items: center; gap: 12px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  background: var(--base);
  border: 1px solid var(--base-text);
  border-radius: 999px;
}
.topbar .nav-link:is(:hover, :focus-visible, :active, [aria-pressed="true"], [aria-current="page"]) { background: var(--base-text); color: var(--base); border-color: var(--base-text); }
.topbar .monogram { background: transparent; color: var(--base-text); }
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 36px;
  line-height: 1;
}
main { flex: 1; min-height: 0; padding: 0 var(--gutter); }
.home { display: flex; flex-direction: column; }
.welcome { flex: none; max-width: 920px; margin: 0; padding: 20px 0px; text-wrap: pretty; }
.trinkets { flex: 1; min-height: 0; }
.info-page { flex: none; min-height: auto; max-width: 960px; padding-bottom: 24px; overflow-wrap: anywhere; }
#contact-form { margin-block: 24px; }
#contact-form label { display: block; margin-block: 12px; }
#contact-form textarea { display: block; width: 100%; resize: vertical; min-height: 100px; padding: 10px; }
#contact-form :is(textarea, button) { font: inherit; color: var(--base-text); background: var(--base); border: 1px solid var(--base-text); border-radius: 0; }
#contact-form button { min-height: 44px; padding: 8px 16px; cursor: pointer; }
#contact-form button:disabled { opacity: .65; cursor: default; }
#contact-form button:not(:disabled):is(:hover, :active) { color: var(--base); background: var(--base-text); }
#contact-form :is(textarea, button):focus-visible { outline: 2px solid var(--base-text); outline-offset: 5px; }
#contact-status { min-height: 2em; }
.auth-page { flex: none; min-height: auto; max-width: 960px; padding-bottom: 24px; overflow-wrap: anywhere; }
.auth-page label { display: block; margin-block: 12px; }
.auth-page :is(input, button) { max-width: 100%; font: inherit; color: var(--base-text); background: var(--base); border: 1px solid var(--base-text); border-radius: 0; padding: 8px; min-height: 44px; }
.auth-page button { cursor: pointer; }
.auth-page button:is(:hover, :active) { color: var(--base); background: var(--base-text); }
.auth-page :is(input, button, a):focus-visible { outline: 2px solid var(--base-text); outline-offset: 5px; }
.auth-page form { margin-block: 16px; }
.sessions { padding-inline-start: 20px; }
.sessions li { margin-block: 20px; }
.sessions:has(.session-row) { list-style: none; padding: 0; }
.session-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 16px; border: 1px solid var(--base-text); }
.session-description { flex: 1 1 320px; min-width: 0; }
.session-row form { flex: 0 1 auto; margin: 0; }
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; font: inherit; }
.older-messages { text-decoration: underline; }
.auth-page { line-height: 1.6; }
.auth-page section { margin-block: 32px; }
.auth-page article { margin-block: 32px; padding-block: 8px; }
.auth-page a { text-decoration: underline; text-underline-offset: 3px; }
.account-links { justify-content: flex-start; flex-wrap: wrap; gap: 24px; margin-block: 32px; }
.session-badge { display: inline-block; border: 1px solid var(--base-text); padding: 2px 8px; margin: 4px 0; }
.auth-page .message-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.auth-page .message-filter label { display: flex; align-items: center; gap: 16px; }
.delete-status { display: block; margin-top: 16px; min-height: 3.2em; }
.message-delete button { touch-action: manipulation; user-select: none; }
.auth-page button:disabled { cursor: default; opacity: .65; }
.auth-page input[type="checkbox"] { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0; padding: 0; accent-color: var(--base-text); }

@media (max-height: 400px) {
  .topbar { padding-block: 4px; }
}