/* ============================================================
   PCBGames — GeoCities theme: About page styles (PH-14)
   about.html loads css/style.css (the shared page shell, hit counter
   and .spec-table) first and this file second. It holds what only
   the About page has: the .wmcard "about me" box with the beige PC,
   and the "E-mail me!" form (.mailform) with its envelope stamp,
   status line (.mstatus) and the admin-only inbox (.inbox).

   js/contact.js writes .terminal-line / .system-line rows, the
   .comment-* parts of an inbox letter and .delete-comment-btn, so
   those class names are load-bearing here.
   ============================================================ */

/* ---------- About me: the homepage's WEBMASTER box, full size ---------- */

.wmcard {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 2px outset var(--bevel);
  background: var(--cream);
  padding: 10px 12px;
  margin: 0 0 12px;
}
.wmcard .pc { flex: none; margin: 4px 0 0; }
.wmcard-b p { margin: 0 0 8px; }
.wmcard-b p:last-child { margin-bottom: 0; }
.wmcard-h {
  font-family: var(--font-joke);
  font-size: 18px;
  font-weight: bold;
  color: var(--red-text);
}

.spec-table code { font-size: 12px; }

/* ---------- E-mail me! (the contact terminal) ----------
   .form-row is display:flex because setAdminUI() puts it back with
   style.display = 'flex' after a /logout. */

#contact .ph img { margin: 0 4px; }

.mailform {
  position: relative;
  background: var(--sheet);
  border: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg,
    #c00 0 8px, #fff 8px 16px, #0033cc 16px 24px, #fff 24px 32px) 6;
  padding: 10px 12px 8px;
  font-family: var(--font-alt);
  font-size: 13px;
}
/* the envelope sits in the corner like a stamp */
.mail-stamp {
  float: right;
  margin: 0 0 6px 10px;
  padding: 4px;
  border: 2px dashed var(--shade);
  background: var(--row-alt);
  text-align: center;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: bold;
  color: var(--stamp);
  letter-spacing: 1px;
}
.mail-stamp img { display: block; image-rendering: pixelated; }

.mailform .form-row { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.mailform label { flex: none; width: 70px; font-weight: bold; }
.mailform input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-alt);
  font-size: 13px;
  border: 2px inset var(--bevel);
  background: var(--field-bg);
  color: var(--field-fg);
  padding: 2px 4px;
}
.mailform input:disabled { background: var(--field-off); }
.mailform .form-row.submit { clear: right; margin: 2px 0 0 76px; }
.mailform .form-row.submit .btn { font-size: 13px; }

.mstatus:empty { display: none; }
.mstatus {
  margin-top: 6px;
  padding: 3px 6px;
  background: var(--status-bg);
  border: 1px solid var(--shade);
  font-family: var(--font-ui);
  font-size: 11px;
}

/* the admin inbox: only ever filled after an admin /login */
.inbox:empty { display: none; }
.inbox {
  margin: 10px 0;
  max-height: 420px;
  overflow-y: auto;
  border: 2px inset var(--bevel);
  padding: 6px;
  background: var(--row-alt);
}
.inbox .terminal-line { margin: 0 0 6px; }
.inbox .system-line { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); }
.inbox .terminal-line:not(.system-line) {
  border: 1px solid var(--shade);
  background: var(--sheet);
  padding: 4px 8px;
}
.comment-meta { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); border-bottom: 1px dotted var(--shade); padding-bottom: 2px; }
.comment-header { color: var(--heading); }
.comment-body { margin: 4px 0 2px; overflow-wrap: anywhere; }
.btn.delete-comment-btn { font-size: 10px; padding: 0 6px; margin-left: 6px; color: var(--alert); }

/* ---------- Phones ---------- */

@media (max-width: 700px) {
  .wmcard { flex-direction: column; align-items: center; text-align: left; }
  .wmcard .pc { margin: 0 auto; }
  .mail-stamp { display: none; }   /* the envelopes in the heading carry it */
  .mailform { padding: 8px; }
  .mailform label { width: 62px; }
  .mailform .form-row.submit { margin-left: 0; }
}