/* Penultimate stylesheet.

   The complete default look: the 90s dark-teal board, a black page with a
   dark-teal ledger, coral links, and Verdana body text. The server hands back
   base.css followed by the selected skin's own rules (see skins.go). The
   default "teal" skin is intentionally empty, so this file alone is what a
   fresh visitor sees; a second skin would layer its overrides on top of these
   rules.

   Every rule is unscoped and keys on the class vocabulary the server bakes
   into the markup, so one stylesheet styles the page with nothing
   viewer-specific in the HTML.

   Layout, top to bottom: document and elements, page layout, then one section
   per component in roughly cascade order, then the responsive
   (max-width: 640px) collapse. Selectors and declarations are one per line.

   Palette:
     #000              page background
     #fff              primary text
     #ff4f4f           coral links and primary actions
     #ff8f6f           warm coral headings
     #033 / #034242    teal ledger accent and its top highlight
     #303030 / #3d3a3a row surfaces (even / odd)
     #5b5050           button face
     #262626           input, quote, and admin surfaces
     #8fb3b3 / #bfe6e6 muted and light teal text
     #cfe              pale cyan
     #a9a9a9 / #888    muted grey text
     #252525 / #2b2a2a deleted-post surfaces */

/* ==========================================================================
   Document and elements
   ========================================================================== */

body {
  margin: 0;
  min-height: 100vh;
  --maxw: 900px;
  background: #000;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  line-height: 1.38;
}

.forum,
.forum * {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #ff4f4f;
  text-decoration: underline;
}

/* Timestamps are hidden by default and revealed by the component that owns
   them, so a page never shows both an absolute and a relative time. */
.t-rel,
.t-abs {
  display: none;
}

/* ==========================================================================
   Page layout
   ========================================================================== */

.forum {
  width: 100%;
  padding: 26px 20px 56px;
}

.frame {
  max-width: var(--maxw, 940px);
  margin: 0 auto;
}

.forum a {
  cursor: pointer;
}

/* ==========================================================================
   Masthead and nav
   ========================================================================== */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid #033;
}

.masthead__brand {
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
}

.masthead__nav {
  display: flex;
  gap: 12px;
  font-size: 11px;
}

/* The Admin link is baked greyed and inert; the script turns it on only for
   an admin viewer. This mutes it and keeps the off state unclickable in both
   the masthead and the footer. */
.masthead__nav a[aria-disabled="true"],
.footer-nav a[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
  color: #6a7a7a;
  text-decoration: none;
  opacity: .5;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  font-size: 11px;
}

.crumbs li::after {
  content: "\203A";
  margin-left: 6px;
  color: #556;
}

.crumbs li:last-child::after {
  content: "";
}

/* ==========================================================================
   Page panel (section heading)
   ========================================================================== */

.panel {
  margin-bottom: 12px;
}

.panel__title {
  margin: 0;
  font-size: 18px;
  color: #fff;
}

.panel__sub {
  margin: .25em 0 0;
  color: #8fb3b3;
  font-size: 12px;
}

.panel__actions {
  margin-top: 12px;
}

/* ==========================================================================
   Thread header bar
   ========================================================================== */

.thread__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 6px 10px;
  background: #033;
  border-top: 1px solid #034242;
  font-size: 13px;
  color: #fff;
}

.thread__page {
  white-space: nowrap;
  font-weight: 400;
  color: #bfe6e6;
  font-size: 12px;
}

/* ==========================================================================
   Listings (forum index, forum front, roster, search)
   ========================================================================== */

.listing {
  margin-bottom: 16px;
}

.listing[data-kind="forums"] {
  --cols: minmax(0, 1fr) 74px 78px 210px;
}

.listing[data-kind="threads"] {
  --cols: minmax(0, 1fr) 150px 74px 200px;
}

.listing[data-kind="users"] {
  --cols: 52px minmax(0, 1fr) 118px 66px 200px;
}

.listing__head,
.listing__row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
}

.listing__cat {
  padding: 6px 10px;
  background: #033;
  border-top: 1px solid #034242;
  font-weight: 700;
  color: #bfe6e6;
}

.listing__head {
  background: #033;
  border-top: 1px solid #034242;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.listing__head .cell {
  padding: 6px 10px;
}

.listing__row {
  background: #303030;
  color: #fff;
  text-decoration: none;
  margin-top: 1px;
}

.listing__row:nth-of-type(even) {
  background: #3d3a3a;
}

.listing__row:hover {
  outline: 1px solid #ff4f4f;
  outline-offset: -1px;
}

.listing .cell {
  padding: 8px 10px;
}

.cell {
  min-width: 0;
}

.cell[data-col="count"] {
  text-align: center;
  color: #cfe;
  font-size: 12px;
}

.listing__icon {
  margin-right: 6px;
}

.listing__title {
  font-weight: 700;
  color: #ff8f6f;
}

.listing__desc {
  display: block;
  margin-top: 2px;
  color: #a9a9a9;
  font-size: 11px;
  font-weight: 400;
}

.activity {
  display: flex;
  flex-direction: column;
}

.activity__by {
  color: #ff8f6f;
}

.activity__when .t-abs {
  display: inline;
  color: #8fb3b3;
  font-size: 11px;
}

/* ==========================================================================
   Posts
   ========================================================================== */

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post {
  display: grid;
  grid-template-columns: var(--post-cols, 168px minmax(0, 1fr));
  --post-cols: 168px minmax(0, 1fr);
  background: #303030;
  margin-top: 1px;
}

.post[data-parity="odd"] {
  background: #3d3a3a;
}

.post__author {
  padding: 12px;
  border-right: 1px solid #000;
}

.post__main {
  padding: 12px;
  min-width: 0;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  font-size: 11px;
  color: #a9a9a9;
}

.post__permalink {
  color: #8fb3b3;
}

.post__time .t-abs {
  display: inline;
}

.post__controls {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.post__body p {
  margin: 0 0 .65em;
}

.post__body p:last-child {
  margin-bottom: 0;
}

.username {
  display: block;
  font-weight: 700;
  color: #ff4f4f;
  text-decoration: underline;
}

.rank {
  display: block;
  margin-top: 2px;
  color: #8fb3b3;
  font-size: 11px;
}

.postcount {
  display: block;
  margin-top: 6px;
  color: #888;
  font-size: 10px;
}

/* ==========================================================================
   Avatars
   ========================================================================== */

.avatar {
  display: block;
  max-width: var(--avatar-w, 512px);
  max-height: var(--avatar-h, 512px);
  border: 1px solid #033;
}

.post__author .avatar {
  max-width: 100%;
  max-height: 220px;
  margin-bottom: 8px;
}

.avatar-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.avatar-history__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.avatar-history .avatar {
  max-width: 96px;
  max-height: 96px;
}

.avatar-history__date {
  color: #8fb3b3;
  font-size: 11px;
}

/* ==========================================================================
   Tombstones (deleted posts). These follow .post so the deleted surface
   wins the shared background at equal specificity.
   ========================================================================== */

.post--deleted {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 7px 12px;
  background: #252525;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 8px, transparent 8px 16px);
  border-top: 1px solid rgba(0, 0, 0, .45);
  font-size: 12px;
  font-style: italic;
  color: #a9a9a9;
}

.post--deleted[data-parity="odd"] {
  background-color: #2b2a2a;
}

.tombstone__text {
  min-width: 0;
  margin: 0;
}

.tombstone__link,
.tombstone__permalink {
  color: #ff8f8f;
  text-decoration: underline;
}

.tombstone__name {
  color: #d9d9d9;
}

.tombstone__reason {
  color: #c8c8c8;
}

.tombstone__time {
  white-space: nowrap;
  color: #888;
}

.tombstone__time .t-abs {
  display: inline;
}

/* ==========================================================================
   Buttons. .btn--primary follows .btn so it wins the shared background at
   equal specificity.
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 2px 8px;
  background: #5b5050;
  color: #fff;
  border: 1px solid #000;
  border-radius: 3px;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: #ff4f4f;
  color: #000;
  border-color: #ff4f4f;
}

.btn[data-active="true"] {
  background: #ff4f4f;
  color: #000;
}

[data-live-state="checking"] .btn[aria-disabled="true"],
.btn[aria-disabled="true"] {
  pointer-events: none;
}

.btn[aria-disabled="true"] {
  opacity: .58;
  cursor: wait;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #033;
  color: #bfe6e6;
  font-size: 10px;
  text-transform: uppercase;
}

/* ==========================================================================
   Quotes
   ========================================================================== */

.quote {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #262626;
  border: 1px solid #000;
  font-size: 12px;
}

.quote cite {
  display: block;
  margin-bottom: 4px;
  color: #8fb3b3;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
}

/* ==========================================================================
   Definition lists
   ========================================================================== */

.deflist {
  margin: 0;
}

.deflist dt,
.deflist dd {
  margin: 0;
}

.deflist__row {
  display: grid;
  grid-template-columns: var(--dl-cols, 150px minmax(0, 1fr));
  margin-top: 1px;
}

.deflist__key {
  padding: 8px 10px;
  background: #033;
  border-top: 1px solid #034242;
  color: #bfe6e6;
  font-weight: 700;
}

.deflist__val {
  padding: 8px 10px;
  background: #303030;
  border-top: 1px solid #3a3838;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form {
  margin: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.field {
  display: grid;
  grid-template-columns: var(--field-cols, 160px minmax(0, 1fr));
  align-items: center;
  gap: 10px;
}

.field--block {
  display: block;
}

.field--block .field__label {
  display: block;
  margin-bottom: 6px;
}

.field__label {
  color: #bfe6e6;
  font-weight: 700;
}

.field__input {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  background: #262626;
  border: 1px solid #000;
  color: #fff;
}

.field__input:focus {
  outline: 1px solid #ff4f4f;
}

.field__static {
  padding: 8px 10px;
}

.field__textarea {
  min-height: 170px;
  resize: vertical;
  line-height: 1.5;
}

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
}

.field--check .field__input {
  width: auto;
}

.radio-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.radio-row label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.problem {
  margin: 0 0 16px;
  padding: 8px 10px;
  background: #2a1010;
  border: 1px solid #7a1f1f;
  color: #ff8f6f;
}

.problem p {
  margin: .2em 0;
}

.form-note {
  margin: .6em 0 0;
  opacity: .75;
  font-size: .9em;
  color: #8fb3b3;
}

/* ==========================================================================
   Prose
   ========================================================================== */

.prose p {
  margin: 0 0 1em;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Profile
   ========================================================================== */

.profile__card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 0;
}

.profile__name {
  margin: 0;
  font-size: 20px;
}

.sig {
  margin: 0;
  padding: 4px 0 4px 10px;
  border-left: 3px solid #033;
  color: #cfe;
  font-style: italic;
}

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-menu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.admin-log {
  margin: 0;
  padding: 12px 14px;
  background: #262626;
  border: 1px solid #000;
  color: #9fe6c9;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

.card-note {
  margin: .4em 0 0;
  opacity: .8;
  color: #8fb3b3;
}

/* ==========================================================================
   Controls, pager, action bar
   ========================================================================== */

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pager {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.actionbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  margin-top: 44px;
  padding-top: 16px;
  text-align: center;
  line-height: 1.8;
  border-top: 2px solid #033;
  color: #8fb3b3;
  font-size: 11px;
}

.site-footer a {
  color: #ff4f4f;
}

.footer-nav {
  margin-bottom: 6px;
}

/* ==========================================================================
   Responsive: phone collapse (single column, finger-sized targets)
   ========================================================================== */

@media (max-width: 640px) {
  .forum {
    padding: 0 0 40px;
    font-size: 15px;
    line-height: 1.5;
  }

  /* Content nests one level inside .frame, so the gutter goes on its
     children rather than on .forum. */
  .frame > *:not(.masthead) {
    margin-left: 16px;
    margin-right: 16px;
  }

  .forum .masthead {
    position: sticky;
    top: 0;
    z-index: 4;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px;
  }

  .masthead {
    background: #000;
  }

  .masthead__brand {
    font-size: 17px;
  }

  .forum .masthead__nav {
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .forum .masthead__nav::-webkit-scrollbar {
    display: none;
  }

  .forum .masthead__nav a {
    flex: none;
    padding: 7px 12px;
  }

  .masthead__nav a {
    background: #1c1c1c;
    border: 1px solid #033;
    border-radius: 16px;
    text-decoration: none;
    font-size: 13px;
  }

  .forum .crumbs {
    gap: 6px;
    padding: 12px 0 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .forum .crumbs::-webkit-scrollbar {
    display: none;
  }

  .forum .crumbs li {
    flex: none;
  }

  .forum .panel {
    margin-top: 16px;
  }

  .forum .panel__actions {
    margin-top: 12px;
  }

  .panel__title {
    font-size: 22px;
  }

  .thread__title {
    font-size: 21px;
  }

  /* Listings drop the header row and stack each row as its own card. */
  .forum .listing {
    margin-top: 16px;
  }

  .listing {
    border: 1px solid #033;
  }

  .forum .listing__head {
    display: none;
  }

  .forum .listing__row {
    display: block;
    padding: 13px 14px;
  }

  .listing__row {
    border-top: 1px solid #1c1c1c;
  }

  .listing__row:active {
    outline: 2px solid #ff4f4f;
    outline-offset: -2px;
  }

  .forum .listing .cell {
    display: block;
    min-width: 0;
  }

  .forum .listing__icon {
    display: none;
  }

  .listing__title {
    font-size: 16px;
  }

  .forum .listing__row .cell[data-col="count"],
  .forum .listing__row .cell[data-col="activity"] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }

  .forum .activity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .forum .row-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }

  /* With the header gone, name the stacked cells in place. */
  .listing__row .cell::before {
    color: #8fb3b3;
    font-weight: 400;
  }

  .forum .listing[data-kind="forums"] .listing__row .cell[data-col="count"]:nth-of-type(2)::before {
    content: "Threads: ";
  }

  .forum .listing[data-kind="forums"] .listing__row .cell[data-col="count"]:nth-of-type(3)::before {
    content: "Posts: ";
  }

  .forum .listing[data-kind="threads"] .listing__row .cell[data-col="count"]::before {
    content: "Replies: ";
  }

  .forum .listing[data-kind="threads"] .listing__row .cell:nth-of-type(2)::before {
    content: "by ";
  }

  .forum .listing[data-kind="users"] .listing__row .cell:nth-of-type(1) {
    display: inline-block;
  }

  .forum .listing[data-kind="users"] .listing__row .cell:nth-of-type(1)::before {
    content: "#";
  }

  .forum .listing[data-kind="users"] .listing__row .cell[data-col="count"]::before {
    content: "Posts: ";
  }

  /* Posts stack; the author cell becomes a header bar above the body. The
     avatar is a real uploaded image, so it is sized and cropped square. */
  .forum .posts {
    margin: 16px;
    padding: 0;
  }

  .forum .post {
    display: block;
    margin-top: 8px;
  }

  .post {
    border: 1px solid #1c1c1c;
  }

  .forum .post__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  .post__author {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .25);
  }

  .forum .post__author .avatar {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    margin: 0;
    object-fit: cover;
    flex: none;
  }

  .forum .post__author .rank {
    margin-left: auto;
    text-align: right;
  }

  .forum .post__main {
    padding: 12px 14px;
  }

  .forum .post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .forum .post__controls {
    margin-left: auto;
    display: flex;
    gap: 8px;
  }

  .username {
    font-size: 15px;
  }

  /* Tombstones keep their compact grid, and the timestamp wraps under the
     text instead of holding a column. */
  .forum .post--deleted {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .forum .tombstone__time {
    grid-column: 1;
    white-space: normal;
  }

  /* Buttons go finger-sized; control rows stretch their buttons full width. */
  .forum .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
  }

  .btn {
    font-size: 14px;
    border-radius: 8px;
  }

  .forum .pager {
    margin: 16px;
  }

  .forum .pager .btn {
    min-width: 44px;
    padding: 0 12px;
  }

  .forum .actionbar,
  .forum .controls {
    margin: 16px;
  }

  .forum .actionbar .btn,
  .forum .controls .btn {
    flex: 1 1 auto;
  }

  .forum .actionbar form,
  .forum .controls form {
    display: flex;
    flex: 1 1 auto;
  }

  .forum .admin-menu {
    flex-direction: column;
    gap: 10px;
    margin: 16px;
  }

  .forum .admin-menu .btn {
    width: 100%;
  }

  /* Definition lists stack key over value. */
  .forum .deflist {
    margin: 16px;
  }

  .deflist {
    border: 1px solid #033;
  }

  .forum .deflist__row {
    display: block;
    padding: 10px 14px;
  }

  .deflist__row {
    background: #303030;
    border-top: 1px solid #1c1c1c;
  }

  .deflist__row:first-child {
    border-top: 0;
  }

  .deflist__row:nth-of-type(even) {
    background: #3d3a3a;
  }

  .forum .deflist__key,
  .forum .deflist__val {
    display: block;
  }

  .deflist__key {
    background: none;
    border-top: 0;
    padding: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
  }

  .deflist__val {
    background: none;
    border-top: 0;
    padding: 0;
    font-size: 15px;
  }

  .forum .deflist__val {
    margin-top: 3px;
  }

  /* Profile header. */
  .forum .profile__card {
    margin-top: 16px;
  }

  .forum .profile__card .avatar {
    width: 56px;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
    object-fit: cover;
  }

  .profile__name {
    font-size: 22px;
  }

  /* Forms: full-width fields. The 16px input text is not styling; it is the
     size below which iOS zooms the page on focus. */
  .forum .form {
    margin: 16px;
  }

  .forum .form-group {
    gap: 16px;
  }

  .forum .field {
    display: block;
  }

  .forum .field__label {
    display: block;
    margin-bottom: 6px;
  }

  .forum .field--check {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .forum .field--check .field__label {
    margin: 0;
  }

  .forum .field__input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .field__input {
    border-radius: 8px;
  }

  .forum .field--check .field__input {
    width: auto;
    min-height: 0;
  }

  .forum .field__textarea {
    min-height: 150px;
  }

  .forum .radio-row {
    gap: 20px;
  }

  .forum .problem {
    margin: 16px;
  }

  .forum .form-note {
    margin: 12px 16px;
  }

  .forum .card-note {
    margin: 10px 16px 0;
  }

  .forum .prose {
    margin: 16px;
  }

  .forum .admin-log {
    margin: 16px;
  }

  .forum .site-footer {
    margin: 28px 16px 0;
  }
}

/* The default "teal" look lives entirely in base.css, so this skin adds
   nothing. It exists as the registered default skin and as the place a future
   variant would put the rules that override base.css. */