/*
 * Pages beyond the homepage (Phase 2 on): login, register, profiles, the Members list, settings,
 * and the signed-in login box and top bar.
 *
 * The 2018 capture has no such pages, so everything here is derived from the theme's own pieces:
 * the module box, medbutton buttons, black .input-text fields, the regular-title bar
 * (.element_smalltitle), the avatar frame, and the forum-table colours (#121210 cells, #0f0f0d
 * headers, #363224 rules). Every selector is scoped to a class the 2018 homepage never uses, so
 * nothing here can move a pixel of it (tests/unit/pages-css.test.js checks).
 *
 * No fixed widths inside the content: columns wrap and forms stack, ready for the phone layout
 * (Phase 4).
 */

/* Page box */
.page-body {
  padding: 16px 18px 18px;
  font-size: 13px;
  line-height: 1.5;
}

.page-body p {
  margin: 0 0 10px;
  line-height: 1.5;
}

.page-split {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: flex-start;
}

.page-form {
  flex: 1 1 320px;
  max-width: 420px;
}

.page-aside {
  flex: 1 1 240px;
  max-width: 360px;
}

.section-title {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: bold;
}

/* Forms */
.form-row {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: bold;
}

.form-row .input-text input {
  box-sizing: border-box;
  padding: 1px 2px;
  font-family: Arial, Helvetica, sans-serif;
}

.form-row.has-error .input-text {
  border-color: #a05a45;
}

.form-error {
  margin-top: 5px;
  font-size: 12px;
  color: #f08f6f;
}

.form-hint {
  margin-top: 5px;
  font-size: 11px;
  color: #858176;
}

/* Read by screen readers, not shown (the section title above already says it). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-check label {
  font-size: 12px;
  cursor: pointer;
}

.form-check input {
  margin: 0 4px 0 0;
  vertical-align: -2px;
}

.form-actions {
  margin: 18px 0 12px;
}

.form-footnote {
  font-size: 12px;
}

.form-message {
  margin-bottom: 16px;
  padding: 9px 11px;
  border: 1px solid;
  line-height: 1.4;
}

.form-message.error {
  border-color: #6b3a2c;
  background-color: #1c100c;
  color: #f2b8a3;
}

.form-message.notice {
  border-color: #3f4a2e;
  background-color: #11150c;
  color: #cfe6b4;
}

/* Logout in the top bar: a POST button dressed as the links beside it */
.topbar-form {
  display: inline;
}

.topbar-form button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #e9bd7f;
  cursor: pointer;
}

/* Like the 2018 top-bar links (#enjin-bar a), it stays gold on hover and gains an underline. */
.topbar-form button:hover,
.topbar-form button:focus {
  text-decoration: underline;
}

/* Avatars: the theme's frame, at a few fixed sizes. Without an upload the frame stays black. */
.avatar {
  vertical-align: top;
}

.avatar img,
.avatar .avatar-empty {
  display: block;
}

.avatar .avatar-empty {
  background-color: #000;
}

.avatar-23 img,
.avatar-23 .avatar-empty {
  width: 23px;
  height: 23px;
}

.avatar-32 img,
.avatar-32 .avatar-empty {
  width: 32px;
  height: 32px;
}

.avatar-48 img,
.avatar-48 .avatar-empty {
  width: 48px;
  height: 48px;
}

.avatar-128 img,
.avatar-128 .avatar-empty {
  width: 128px;
  height: 128px;
}

/* The signed-in login box */
.login-member-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-who {
  min-width: 0;
  overflow-wrap: anywhere;
}

.login-who .element_username {
  font-size: 14px;
  font-weight: bold;
}

.login-rank {
  margin-top: 4px;
  font-size: 11px;
  color: #858176;
}

.login-links {
  margin: 10px 0 8px;
  font-size: 12px;
  line-height: 1.7;
}

/* Badges: role and the Original '43 mark */
.badge {
  display: inline-block;
  padding: 2px 5px 1px;
  border: 1px solid;
  font-size: 10px;
  font-weight: bold;
  line-height: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-admin {
  border-color: #e9bd7f;
  color: #e9bd7f;
}

.badge-moderator {
  border-color: #8bed80;
  color: #8bed80;
}

.badge-original {
  border-color: #fff8c9;
  background-color: #2a2516;
  color: #fff8c9;
}

/* Profile page */
.profile {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  align-items: flex-start;
}

.profile-card {
  flex: 0 1 220px;
  min-width: 180px;
  text-align: center;
}

.profile-card .avatar {
  display: inline-block;
}

.profile-name {
  margin: 10px 0 6px;
  font-size: 18px;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}

.profile-rank {
  font-size: 12px;
  color: #858176;
}

.profile-facts {
  margin-top: 14px;
  border-top: 1px solid #363224;
  font-size: 12px;
  text-align: left;
}

.profile-facts div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px solid #363224;
}

.profile-facts dt {
  color: #858176;
}

.profile-actions {
  margin-top: 14px;
}

.profile-main {
  flex: 1 1 400px;
  min-width: 0;
}

.profile-section {
  margin-bottom: 18px;
}

/* Two-column facts in the forum-table colours */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.info-table th,
.info-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #363224;
  text-align: left;
  vertical-align: top;
}

.info-table th {
  width: 35%;
  background-color: #0f0f0d;
  color: #858176;
  font-weight: normal;
}

.info-table td {
  background-color: #121210;
  overflow-wrap: anywhere;
}

.empty-note {
  color: #858176;
}

/* Member-written text (about me, signatures): sanitized Markdown */
.user-content {
  overflow-wrap: break-word;
  line-height: 1.5;
}

.user-content p,
.user-content ul,
.user-content ol,
.user-content blockquote,
.user-content pre {
  margin: 0 0 10px;
}

.user-content ul {
  padding-left: 22px;
  list-style: disc;
}

.user-content ol {
  padding-left: 22px;
  list-style: decimal;
}

.user-content blockquote {
  padding: 2px 10px;
  border-left: 3px solid #363224;
  color: #b8b19c;
}

.user-content code {
  padding: 0 3px;
  background-color: #0f0f0d;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
}

.user-content pre {
  padding: 8px;
  border: 1px solid #363224;
  background-color: #0f0f0d;
  white-space: pre-wrap;
}

.user-content pre code {
  padding: 0;
}

.signature {
  padding-top: 8px;
  border-top: 1px solid #363224;
  font-size: 12px;
  color: #b8b19c;
}

/* More form fields: multi-line text and drop-downs, styled like the theme's black inputs */
.form-row .input-textarea {
  padding: 5px 4px;
  border: 1px solid #59534c;
  background-color: #000;
}

.form-row .input-textarea textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #fff;
  resize: vertical;
}

.form-row .input-select select {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 4px;
  border: 1px solid #59534c;
  background-color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #fff;
}

.form-row.has-error .input-textarea,
.form-row.has-error .input-select select {
  border-color: #a05a45;
}

.form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.form-grid .form-row {
  flex: 1 1 200px;
}

.form-row .file-input {
  max-width: 100%;
  font-size: 12px;
  color: #d1cab3;
}

.avatar-form {
  margin-top: 16px;
  text-align: left;
}

.settings-verify p {
  margin-bottom: 8px;
}

/* The Members list: search, sorting and a table in the forum colours */
.members-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 14px;
}

.members-search {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 6px;
  max-width: 360px;
}

.members-search .input-text {
  flex: 1 1 auto;
}

.members-search .input-text input {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.members-sort {
  font-size: 12px;
}

.table-scroll {
  overflow-x: auto;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.members-table th,
.members-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #363224;
  text-align: left;
  white-space: nowrap;
}

.members-table th {
  background-color: #0f0f0d;
  font-size: 12px;
  color: #858176;
}

.members-table td {
  background-color: #121210;
  vertical-align: middle;
}

.members-table .number {
  text-align: right;
}

.member-name .avatar {
  margin-right: 8px;
  vertical-align: middle;
}

.members-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: #858176;
}

/* The avatar cropper (public/js/avatar-crop.js): the picture in a square box, in the theme's
   avatar frame colours. The box keeps the page's touch gestures to itself, for dragging. */
.avatar-crop {
  margin: 4px 0 12px;
}

.avatar-crop-box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #47423c;
  background-color: #000;
  aspect-ratio: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.avatar-crop-box:active {
  cursor: grabbing;
}

/* Focused by a mouse or finger: no keyboard outline (it returns with the first key press). */
.avatar-crop-box.is-pointer:focus-visible {
  outline: 0;
}

.avatar-crop-box img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
}

.avatar-crop-zoom {
  box-sizing: border-box;
  width: 100%;
  accent-color: #e9bd7f;
}

/* The Members list's "posts" after each count only shows below 768px (in the phone rows). */
.member-posts-unit {
  display: none;
}

/* The admin hub (/admin): under each group's title bar, its pages as a list of links, spaced like
   the signed-in login box's links. */
.admin-links {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.9;
}

/* The Shout Box's history (/shoutbox) and a shout's Moderate page: the box's rows (widgets.css,
   .m_shoutbox) at the page's width, with no scroll of their own; older and newer pages above and
   below them. */
.shout-page {
  padding-bottom: 0;
}

.shout-page .shout {
  padding-right: 4px;
  padding-left: 4px;
}

.shout-page .shout-form,
.shout-page .shout-empty,
.shout-page .shout-note,
.shout-page .shout-status {
  padding-right: 0;
  padding-left: 0;
}

.shout-page .shout-form {
  max-width: 600px;
}

.shout-pager {
  margin: 10px 0;
  font-size: 13px;
}

.shout-deleted,
.shout-actions,
.shout-mute {
  margin-top: 14px;
}

.shout-deleted {
  color: #858176;
}

/* News (/news and a month's page): the homepage's News box (widgets.css, .m_news) at the
   page's width, under a row with the month's name and, for admins, Post news. The row ends in the
   news box's own two-tone rule. */
.news-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 12px 20px;
  border-bottom: 1px solid #0f0906;
}

.news-page-head + .m_news {
  border-top: 1px solid #2b2b2b;
}

.news-page-month {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
}

.news-page-actions {
  margin-left: auto;
}

/* Events (/events and the admins' list): one row per event between the forum tables' rules: the
   title (linked when the event has an address), its time, the note with its line breaks, and
   Edit for admins. The add / edit form is the usual page form; Delete event sits apart below it. */
.events-actions {
  margin-bottom: 14px;
}

.event-list {
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid #363224;
  list-style: none;
}

.event-item {
  padding: 10px 2px;
  border-bottom: 1px solid #363224;
  overflow-wrap: anywhere;
}

.event-item .event-title {
  margin: 0;
  font-size: 14px;
  line-height: 19px;
}

.event-item .event-when {
  margin: 3px 0 0;
  font-size: 12px;
  color: #b8b19c;
}

.event-item .event-note {
  margin: 6px 0 0;
  white-space: pre-line;
}

.event-item .event-edit {
  margin: 6px 0 0;
  font-size: 12px;
}

.event-form .event-delete {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid #363224;
}

/* Delete event asks first: the event's title (any length) and time, then the button and Cancel. */
.event-delete-question {
  overflow-wrap: anywhere;
}

/* Showcase slides (/admin/showcase): one row per slide between the forum tables' rules: its picture
   at half the homepage's size in the avatar frame's colours, its words and link (Save), then its
   tools (Move up / Move down, Replace picture, Delete slide). Add a slide is the usual page form
   below; Delete slide asks first on a page of its own. */
.showcase-slides {
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid #363224;
  list-style: none;
}

.showcase-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 24px;
  padding: 14px 2px;
  border-bottom: 1px solid #363224;
}

.showcase-thumb {
  flex: none;
  line-height: 0;
}

.showcase-thumb img {
  border: 1px solid #47423c;
  background-color: #000;
}

.showcase-edit {
  flex: 1 1 300px;
  max-width: 420px;
}

.showcase-edit .form-actions {
  margin: 12px 0 0;
}

.showcase-tools {
  flex: 1 1 220px;
  max-width: 320px;
}

.showcase-move {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.showcase-replace {
  margin-bottom: 16px;
}

.showcase-replace .form-row {
  margin-bottom: 8px;
}

.showcase-admin > .showcase-thumb {
  margin-bottom: 12px;
}

.showcase-delete-question {
  overflow-wrap: anywhere;
}

/* The archive (Phase 7): an old name's page, its claim form, the admins' Archive names page and
   the profile's archive lines. The posts list is the profile's (.recent-posts, in forums.css). */
.archive-author {
  margin: 4px 0 14px;
  overflow-wrap: anywhere;
}

.archive-author p {
  margin: 0 0 6px;
}

.archive-author-names,
.archive-author-count {
  color: #b8b19c;
}

.archive-author-claim .element_button {
  margin-top: 2px;
}

.archive-claim-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}

.archive-turn-down .form-row {
  margin-bottom: 6px;
}

.archive-link-form {
  max-width: 360px;
}

.archive-admin .section-title {
  margin-top: 20px;
}

.profile-archive-names dd {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.profile-archive-all {
  margin: 8px 0 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

/*
 * Phones (below 768px; DECISIONS 84): the account and member pages in one column. A form and its
 * aside stack at full width, fields grow to finger size with 16px text (so iPhones don't zoom in),
 * the profile card sits above the profile, and each row of the Members table becomes a strip:
 * avatar and name, then rank and posts, then the dates. The shared pieces (.page-body, .form-*,
 * .user-content) give the forum pages the same padding, fields and text sizes.
 */
@media (max-width: 767.98px) {
  /* Page box */
  .page-body {
    padding: 12px;
    font-size: 14px;
  }

  .page-split {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 22px;
  }

  .page-form,
  .page-aside {
    flex: none;
    max-width: none;
    overflow-wrap: anywhere;
  }

  /* Forms */
  .form-row {
    margin-bottom: 16px;
  }

  .form-label {
    margin-bottom: 6px;
    font-size: 13px;
  }

  .form-row .input-text {
    padding: 8px 6px;
  }

  .form-error {
    font-size: 13px;
  }

  .form-hint {
    font-size: 12px;
  }

  .form-check label {
    display: inline-block;
    padding: 8px 0;
    font-size: 14px;
  }

  .form-check input {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
  }

  .form-actions {
    margin: 20px 0 12px;
  }

  .form-footnote {
    font-size: 14px;
  }

  .form-footnote a {
    display: inline-block;
    padding: 9px 0;
  }

  /* The links that are a page's only way on ("Back to login", "log in"): padding on an inline
     link makes it a finger-sized target without moving a line of text. */
  .page-form > p:not(.form-footnote) > a {
    padding: 10px 0;
  }

  .form-message {
    overflow-wrap: anywhere;
  }

  .form-row .input-textarea {
    padding: 8px 6px;
  }

  .form-row .input-textarea textarea,
  .form-row .input-select select {
    font-size: 16px;
  }

  .form-row .input-select select {
    padding: 9px 6px;
  }

  .form-grid {
    display: block;
  }

  .form-row .file-input {
    width: 100%;
    font-size: 14px;
  }

  /* Cloudflare's check is 300px wide. On the narrowest phones scale.js asks for its compact size;
     should it still not fit, its right edge is cut off rather than the page scrolling sideways. */
  .page-body .cf-turnstile {
    max-width: 100%;
    overflow: hidden;
  }

  /* The signed-in login box: the three links in a row, finger-sized. */
  .login-who .element_username {
    font-size: 15px;
  }

  .login-rank {
    font-size: 12px;
  }

  .login-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
    margin: 6px 0 8px;
    font-size: 14px;
  }

  .login-links a {
    display: inline-block;
    padding: 9px 0;
  }

  /* Badges at 11px, as in the forum's author strip */
  .badge {
    font-size: 11px;
  }

  /* Profile: the card on top, then the sections, both full width */
  .profile {
    display: block;
  }

  .profile-card {
    min-width: 0;
    margin-bottom: 22px;
  }

  .profile-name {
    font-size: 20px;
  }

  .profile-rank {
    font-size: 13px;
  }

  /* Under the centred card; on a phone turned sideways it stays a readable width. */
  .profile-facts {
    max-width: 420px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
  }

  .profile-facts div {
    padding: 8px 2px;
  }

  .profile-facts dt {
    flex: none;
  }

  .profile-facts dd {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .profile-actions > a {
    display: inline-block;
    padding: 9px 4px;
    font-size: 14px;
  }

  .info-table {
    font-size: 14px;
  }

  .info-table th,
  .info-table td {
    padding: 8px 10px;
  }

  /* Each recent post opens from anywhere on its row (its sizes are in forums.css). A thread title
     can be one long word or a URL, so it wraps; "8 hours ago" moves to the next line as a whole. */
  .profile-section .recent-posts li {
    position: relative;
    overflow-wrap: anywhere;
  }

  .profile-section .recent-post-title::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .profile-section .recent-post-when {
    white-space: nowrap;
  }

  .user-content {
    overflow-wrap: anywhere;
  }

  /* Edit profile: a bigger square to drag in, and a zoom slider that's easy to catch */
  .avatar-crop-box {
    max-width: 240px;
  }

  .avatar-crop-zoom {
    height: 32px;
    margin: 0;
  }

  /* The Members list: the search field fills the row, the sort links are finger-sized */
  .members-tools {
    display: block;
    margin-bottom: 10px;
  }

  .members-search {
    max-width: none;
    margin-bottom: 4px;
  }

  .members-search .input-text {
    padding: 8px 6px;
  }

  /* The sort links become a row of boxes in the table's colours, the current one outlined like a
     field. The "Sort by:" text and the dots between the links stay for screen readers only. */
  .members-sort {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
  }

  .members-sort a,
  .members-sort strong {
    flex: 1 1 auto;
    margin: 0 5px 5px 0;
    padding: 9px 8px;
    border: 1px solid #363224;
    background-color: #121210;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
  }

  .members-sort > :last-child {
    margin-right: 0;
  }

  .members-sort strong {
    border-color: #59534c;
    background-color: #000;
    color: #fff8c9;
  }

  /* Each member a strip in the table's colours: the avatar on the left, the name on top, then
     "Rank · 230 posts", then the dates. The whole strip opens the profile. */
  .members-table,
  .members-table tbody {
    display: block;
  }

  .members-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .members-table tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-height: 38px;
    padding: 9px 10px 9px 56px;
    border-bottom: 1px solid #363224;
    background-color: #121210;
  }

  /* Ends the "Rank · posts" line: the dates start a new one. */
  .members-table tr::after {
    content: '';
    flex-basis: 100%;
    order: 1;
  }

  .members-table th,
  .members-table td {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: #b8b19c;
    white-space: normal;
  }

  .members-table td.member-name {
    flex-basis: 100%;
    margin-bottom: 3px;
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .members-table .member-name .element_username {
    font-weight: bold;
  }

  .members-table .member-name .element_username::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .members-table .member-name .avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
  }

  .members-table .member-name .avatar img,
  .members-table .member-name .avatar .avatar-empty {
    width: 32px;
    height: 32px;
  }

  .members-table td.number::before {
    content: '\00a0·\00a0';
  }

  .member-posts-unit {
    display: inline;
  }

  .members-table td:nth-child(4),
  .members-table td:nth-child(5) {
    order: 2;
    margin-top: 3px;
    font-size: 12px;
  }

  /* Wide enough for the widest date, so "Last active" lines up from row to row. */
  .members-table td:nth-child(4) {
    min-width: 126px;
  }

  .members-table td:nth-child(4)::before {
    content: 'Joined ';
    color: #858176;
  }

  .members-table td:nth-child(5)::before {
    content: 'Last active ';
    color: #858176;
  }

  .members-table td:nth-child(5) .empty-note {
    text-transform: lowercase;
  }

  .members-pages {
    font-size: 13px;
  }

  .members-pages a {
    display: inline-block;
    padding: 9px 0;
  }

  /* The admin hub: one finger-size row per page (15px text + 24px padding = 45px). */
  .admin-links {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 21px;
  }

  .admin-links a {
    display: block;
    padding: 12px 0;
  }

  /* Shout Box pages: the rows at the box's phone size (widgets.css) without its side padding;
     finger-size Older, Newer and Mute links. */
  .shout-page .shout {
    padding-right: 0;
    padding-left: 0;
  }

  .shout-pager {
    margin: 0;
    font-size: 14px;
  }

  .shout-pager a,
  .shout-mute a {
    display: inline-block;
    padding: 12px 0;
  }

  .shout-mute {
    font-size: 14px;
  }

  /* News: the row at the box's phone padding, and a finger-size Post news. */
  .news-page-head {
    padding: 12px;
  }

  .news-page-actions .element_button .button_block {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 44px;
  }

  .news-page-actions .element_button::before,
  .news-page-actions .element_button::after {
    background-size: auto 100%;
  }

  /* Events: the rows at phone sizes, a finger-size title link (44px, without moving a line), Edit,
     Add an event, the form's Save event and Delete event, and Delete event on the question it
     asks (one size, as on the other admin pages). The title link's padding reaches over the time
     line below it; `position: relative` puts the link on top there, so all 44px answer a tap. */
  .event-item {
    padding: 12px 0;
  }

  .event-item .event-title {
    font-size: 15px;
    line-height: 20px;
  }

  .event-item .event-title a {
    position: relative;
    display: block;
    margin: -12px 0;
    padding: 12px 0;
  }

  .event-item .event-when {
    font-size: 13px;
  }

  .event-item .event-note {
    font-size: 14px;
  }

  .event-item .event-edit {
    font-size: 14px;
  }

  .event-item .event-edit a {
    display: inline-block;
    padding: 12px 0;
  }

  .events-actions .element_button .button_block,
  .event-form .form-actions .element_button input,
  .event-delete .element_button .button_block,
  .event-delete-actions .element_button input {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 44px;
  }

  .events-actions .element_button::before,
  .events-actions .element_button::after,
  .event-form .form-actions .element_button::before,
  .event-form .form-actions .element_button::after,
  .event-delete .element_button::before,
  .event-delete .element_button::after,
  .event-delete-actions .element_button::before,
  .event-delete-actions .element_button::after {
    background-size: auto 100%;
  }

  /* Showcase slides: each slide's parts stacked (picture, words, tools) at the page's width, and
     finger-size buttons. */
  .showcase-slide {
    display: block;
    padding: 14px 0;
  }

  .showcase-slide .showcase-thumb {
    margin-bottom: 14px;
  }

  .showcase-edit,
  .showcase-tools {
    max-width: none;
  }

  .showcase-tools {
    margin-top: 18px;
  }

  .showcase-move {
    gap: 10px;
  }

  .showcase-admin .element_button input,
  .showcase-admin .element_button .button_block {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 44px;
  }

  .showcase-admin .element_button::before,
  .showcase-admin .element_button::after {
    background-size: auto 100%;
  }

  /* The welcome panel's admin page: a finger-size Save. */
  .welcome-form .element_button input {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 44px;
  }

  .welcome-form .element_button::before,
  .welcome-form .element_button::after {
    background-size: auto 100%;
  }

  /* The archive: an old name's posts open from anywhere on their row (as a profile's recent
     posts), its links are finger-size, and the admins' claims stack with their buttons and the
     message field at the page's width. */
  .archive-posts li {
    position: relative;
    overflow-wrap: anywhere;
  }

  .archive-posts .recent-post-title::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .archive-posts .recent-post-when {
    white-space: nowrap;
  }

  .archive-author a,
  .profile-archive-names a,
  .profile-archive-all a {
    display: inline-block;
    padding: 12px 0;
  }

  /* Its label on the line of the (taller) links, as the other facts are. */
  .profile-archive-names {
    align-items: baseline;
  }

  .archive-author .element_button .button_block {
    padding: 0 16px;
  }

  .profile-archive-all {
    font-size: 14px;
  }

  .archive-claim-actions {
    min-width: 0;
    gap: 6px;
  }

  .archive-link-form {
    max-width: none;
  }

  .archive-author .element_button .button_block,
  .archive-claim-form .element_button input,
  .archive-admin .element_button input {
    height: 44px;
    font-size: 14px;
    line-height: 44px;
  }

  .archive-claim-form .element_button input,
  .archive-admin .element_button input {
    padding: 0 16px;
  }

  .archive-author .element_button::before,
  .archive-author .element_button::after,
  .archive-claim-form .element_button::before,
  .archive-claim-form .element_button::after,
  .archive-admin .element_button::before,
  .archive-admin .element_button::after {
    background-size: auto 100%;
  }

  .archive-admin .link-button {
    padding: 12px 0;
    font-size: 14px;
  }
}