/* ============================================================
   PCBGames — GeoCities theme: guestbook page styles (PH-17)
   guestbook.html loads css/style.css (the shared page shell and hit
   counter) first and this file second. It holds what only the
   guestbook has: the "Sign my guestbook!!!" form (.gbform) with its
   status line (.gbstatus), the entry list (.gblist, .gb-entry) and
   the rules list in the right column.

   js/guestbook.js writes the .gblist-h / .gblist-empty lines and the
   .gb-* parts of each entry, so those class names are load-bearing.
   ============================================================ */

#sign .ph img { margin-right: 4px; }

/* ---------- Sign my guestbook!!! ---------- */

.gbform {
  background: var(--cream);
  border: 3px ridge var(--gold);
  padding: 10px 12px 8px;
  font-family: var(--font-alt);
  font-size: 13px;
}
.gbform .form-row { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.gbform .form-row.top { align-items: flex-start; }
.gbform .form-row.top label { padding-top: 3px; }
.gbform label { flex: none; width: 70px; font-weight: bold; }
.gbform input, .gbform textarea {
  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;
}
.gbform textarea { resize: vertical; }
.gbform .form-row.submit { margin: 2px 0 0 76px; }
.gbform .form-row.submit .btn { font-size: 13px; }
.gbform .btn:disabled { color: var(--text-off); cursor: wait; }

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

/* ---------- The entries, newest first ---------- */

.gblist { margin: 10px 0; }
.gblist-h { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); margin: 0 0 4px; }
.gblist-empty { font-style: italic; color: var(--text-dim); }
.gb-entry {
  border: 1px solid var(--shade);
  background: var(--row-alt);
  margin: 0 0 6px;
  padding: 4px 8px;
}
.gb-entry:nth-of-type(odd) { background: var(--sheet); }
.gb-meta { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); border-bottom: 1px dotted var(--shade); padding-bottom: 2px; }
.gb-who { color: var(--heading); }
.gb-body { margin: 4px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.btn.gb-delete { font-size: 10px; padding: 0 6px; margin-left: 6px; color: var(--alert); }

/* ---------- Right column ---------- */

.gbrules { margin: 0; padding-left: 16px; }
.gbrules li { margin-bottom: 4px; }

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

@media (max-width: 700px) {
  .gbform .form-row, .gbform .form-row.top { flex-direction: column; align-items: stretch; gap: 2px; }
  .gbform .form-row.top label { padding-top: 0; }
  .gbform input, .gbform textarea { flex: none; }
  .gbform label { width: auto; }
  .gbform .form-row.submit { margin-left: 0; flex-direction: row; align-items: center; gap: 6px; }
}