/* Ride or Pies: a 2006-era profile page, lovingly reconstructed. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #e5edf7;
  background-image:
    linear-gradient(45deg, #dbe6f3 25%, transparent 25%, transparent 75%, #dbe6f3 75%),
    linear-gradient(45deg, #dbe6f3 25%, transparent 25%, transparent 75%, #dbe6f3 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
  color: #000;
}

a { color: #0000cc; }
a:hover { color: #ff6600; }
p { margin: 0 0 8px; }
img { display: block; }

#page {
  width: 820px;
  max-width: 100%;
  margin: 12px auto;
  background: #fff;
  border: 1px solid #99bbe8;
}

/* ---- header ------------------------------------------------------------ */

#topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #ccc;
}
#logo { text-decoration: none; }
#logo .logo-main {
  font: bold 28px Arial, Helvetica, sans-serif;
  color: #003399;
  letter-spacing: -1.5px;
}
#logo .logo-tag {
  font-size: 11px;
  color: #666;
  margin-left: 6px;
}
#topbar-right { font-size: 11px; }

#navbar {
  background: #6699cc;
  color: #fff;
  font-weight: bold;
  padding: 4px 12px;
  line-height: 1.8;
}
#navbar a { color: #fff; text-decoration: none; }
#navbar a:hover { text-decoration: underline; color: #fff; }
#navbar .sep { margin: 0 5px; color: #cfe0f3; }

.flash {
  margin: 10px 10px 0;
  padding: 6px 10px;
  background: #fff6cc;
  border: 1px solid #e0c060;
}

#content { padding: 10px; }

#footer {
  border-top: 1px solid #ccc;
  padding: 8px 12px;
  font-size: 10px;
  color: #666;
  text-align: center;
}

/* ---- two-column profile layout ---------------------------------------- */

.profile { display: flex; gap: 12px; align-items: flex-start; }
.col-left { width: 300px; flex: none; }
.col-right { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .profile { flex-direction: column; }
  .col-left { width: auto; }
}

.name-block { margin-bottom: 6px; }
.name { font: bold 18px Arial, Helvetica, sans-serif; }
.mood { color: #333; }

.profile-pic { margin-bottom: 8px; }
.profile-pic img { max-width: 100%; border: 1px solid #ccc; }
.online { color: #ff6600; font-weight: bold; font-size: 10px; margin-top: 2px; }

.network {
  border: 2px solid #000;
  padding: 8px;
  margin: 10px 0;
  font-weight: bold;
  text-align: center;
}

/* ---- boxes ------------------------------------------------------------- */

.box { margin-bottom: 12px; }
.box-head {
  background: #6699cc;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
}
.box-head.orange {
  background: #b1d0f0;
  color: #ff6600;
  font-size: 15px;
}
.box-body { padding: 6px 2px; }
.subhead { color: #ff6600; font-weight: bold; }

table.details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  margin: 4px 0;
}
table.details th {
  background: #b1d0f0;
  color: #336699;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  width: 38%;
  padding: 3px 5px;
  vertical-align: top;
}
table.details td {
  background: #d5e8fb;
  padding: 3px 5px;
  vertical-align: top;
}

.contact-links a { display: block; padding: 2px 0; text-decoration: none; }
.contact-links a:hover { text-decoration: underline; }

/* ---- party grid (the "top 8") ----------------------------------------- */

.top8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}
@media (max-width: 500px) { .top8 { grid-template-columns: repeat(2, 1fr); } }
.friend > a:first-child { font-weight: bold; text-decoration: none; }
.friend img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #999;
  margin: 2px auto;
}
.friend-title { font-size: 10px; color: #333; }

/* ---- pies --------------------------------------------------------------- */

.pie-card {
  display: flex;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dotted #ccc;
}
.pie-card.winner { background: #fffbe6; }
.pie-thumb img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 1px solid #999;
}
.pie-info { flex: 1; min-width: 0; }
.ribbon { color: #ff6600; font-weight: bold; }
.pie-name { font-weight: bold; font-size: 13px; }
.pie-baker { color: #333; }
.pie-notes { margin-top: 4px; color: #444; }

/* ---- photo gallery ----------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 500px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #999;
}
.gallery-item .caption { font-size: 10px; color: #333; text-align: center; margin-top: 2px; }

/* ---- comments ---------------------------------------------------------- */

.comment-form label { display: block; margin: 4px 0; }
.comment-form input[type=text], .comment-form textarea { display: block; width: 100%; }
.hp { position: absolute; left: -9999px; top: -9999px; }

.comment {
  display: flex;
  margin-top: 6px;
  border: 1px solid #b1d0f0;
}
.comment-who {
  width: 110px;
  flex: none;
  background: #b1d0f0;
  padding: 6px;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  word-wrap: break-word;
}
.comment-avatar { width: 50px; height: 50px; margin: 0 auto 4px; }
.comment-text { flex: 1; min-width: 0; padding: 6px 8px; word-wrap: break-word; }
.comment-date { color: #666; font-size: 10px; margin-bottom: 3px; }

/* ---- forms ------------------------------------------------------------- */

input, textarea, select, button {
  font: inherit;
}
input[type=text], input[type=password], input[type=number], input[type=date],
textarea, select {
  border: 1px solid #7f9db9;
  padding: 3px 4px;
  background: #fff;
  max-width: 100%;
}
textarea { width: 100%; }
button {
  background: #eee;
  border: 1px solid #999;
  padding: 2px 10px;
  cursor: pointer;
}
button:hover { background: #ddd; }
button.linklike {
  background: none;
  border: none;
  padding: 0;
  color: #0000cc;
  text-decoration: underline;
  cursor: pointer;
}
button.linklike:hover { color: #ff6600; }
.danger, button.danger { color: #c00; }
form.inline { display: inline; }
form.stacked label { display: block; margin: 6px 0; }
form.stacked label input, form.stacked label textarea, form.stacked label select {
  display: block;
  width: 100%;
  margin-top: 2px;
}
.error { color: #c00; font-weight: bold; margin: 4px 0; }
.ok { color: #080; font-weight: bold; margin: 4px 0; }
.muted { color: #666; font-size: 11px; }
.narrow { max-width: 360px; margin: 20px auto; }

/* ---- admin ------------------------------------------------------------- */

.admin .crumbs { margin-bottom: 10px; }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #ddd;
}
table.list th { background: #b1d0f0; color: #336699; font-size: 11px; }

.admin-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 600px) { .admin-gallery { grid-template-columns: repeat(2, 1fr); } }
.admin-photo { border: 1px solid #ccc; padding: 4px; font-size: 11px; }
.admin-photo.is-cover { border: 2px solid #ff6600; }
.admin-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.admin-photo form.stacked { display: flex; gap: 4px; margin: 4px 0; }
.admin-photo form.stacked input { flex: 1; min-width: 0; }

.pie-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dotted #ccc;
}
.pie-row.new { background: #f4f8fd; padding: 8px 4px; }
.pie-row-thumb { width: 70px; height: 70px; object-fit: cover; border: 1px solid #999; flex: none; }
.pie-row-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pie-row-fields textarea, .pie-row-fields div { grid-column: 1 / -1; }
@media (max-width: 500px) { .pie-row-fields { grid-template-columns: 1fr; } }

.danger-zone .box-head { background: #c00; }

/* ---- phones ------------------------------------------------------------ */
/* Desktop keeps the faithful 2006 sizing; below 700px we loosen things up. */

html { -webkit-text-size-adjust: 100%; }

@media (max-width: 700px) {
  body { font-size: 14px; }

  #page { margin: 0; border-left: none; border-right: none; min-height: 100vh; }
  #content { padding: 10px 10px 16px; }

  /* header: let the logo and tagline stack, keep the sign-in link reachable */
  #topbar { flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; }
  #logo { display: flex; flex-direction: column; }
  #logo .logo-main { font-size: 24px; }
  #logo .logo-tag { margin-left: 0; }
  #topbar-right { font-size: 13px; }

  /* nav: wrap into tappable chips instead of a pipe-separated line */
  #navbar { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 8px 10px; line-height: 1.4; }
  #navbar .sep { display: none; }
  #navbar a { padding: 6px 10px; background: rgba(255,255,255,0.15); border-radius: 3px; }

  /* profile pic: don't let a tall portrait photo fill the whole screen */
  .profile-pic img { max-height: 60vh; width: auto; max-width: 100%; margin: 0 auto; }
  .name { font-size: 22px; }
  .online { font-size: 12px; }

  .box-head { padding: 6px 8px; font-size: 14px; }
  .box-head.orange { font-size: 17px; }
  table.details th, table.details td { padding: 6px 8px; font-size: 13px; }
  .contact-links a { padding: 7px 0; }
  .friend-title, .gallery-item .caption { font-size: 12px; }
  .pie-thumb img { width: 80px; height: 80px; }

  /* comments: stack the name above the text instead of a narrow side column */
  .comment { flex-direction: column; }
  .comment-who { width: auto; display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; font-size: 13px; }
  .comment-avatar { width: 28px; height: 28px; margin: 0; }
  .comment-date { font-size: 12px; }

  /* forms: 16px stops iOS Safari from zooming in when a field is tapped */
  input, textarea, select, button { font-size: 16px; }
  input[type=text], input[type=password], input[type=number], input[type=date],
  textarea, select { padding: 8px; }
  button { padding: 8px 14px; }
  button.linklike { padding: 4px 0; }
  .comment-form label, form.stacked label { margin: 8px 0; }

  #footer { font-size: 12px; padding: 12px; }
}