/* Pet Pics Board — layered on top of style.css (uses its palette vars). */
.pets-intro { color: var(--muted); margin: 0 0 4px; }

/* Composer */
#pet-composer .sec-body { padding-top: 12px; }
.pc-form { display: grid; gap: 12px; max-width: 640px; }
.pc-row { display: grid; gap: 6px; }
.pc-row label { font: 600 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.pc-form input[type=text], .pc-form textarea {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  padding: 9px 11px; font: inherit; border-radius: 4px; width: 100%; box-sizing: border-box;
}
.pc-form textarea { resize: vertical; min-height: 60px; }
.pc-drop {
  border: 1.5px dashed var(--line); border-radius: 6px; padding: 18px; text-align: center;
  color: var(--muted); cursor: pointer; background: var(--card);
}
.pc-drop:hover { border-color: var(--accent); }
.pc-drop input[type=file] { display: none; }
.pc-preview { max-width: 100%; max-height: 300px; border-radius: 6px; display: none; margin: 0 auto; }
.pc-count { font: .78rem var(--mono); color: var(--muted); text-align: right; }
.pc-msg { font: .84rem var(--mono); min-height: 1.2em; }
.pc-msg.err { color: var(--accent); }
.pc-msg.ok { color: var(--accent-ink); }
.pc-signin { color: var(--muted); font-size: .9rem; }
.pc-signin a { color: var(--accent-ink); }
/* login-only posting: "posting as" line + inline sign-in box */
.posting-as { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.pc-login { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 640px; }
.pc-login-prompt { font: 600 .82rem var(--mono); letter-spacing: .04em; color: var(--ink); flex-basis: 100%; margin: 0; }
.pc-login input {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  padding: 9px 11px; font: inherit; border-radius: 4px;
}

/* Grid */
#pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 8px; }
.pet-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.pet-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--bg); }
.pet-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pet-name { margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.pet-caption { margin: 0; color: var(--ink); font-size: .93rem; white-space: pre-wrap; word-break: break-word; }
.pet-meta { margin: 0; font: .76rem var(--mono); color: var(--muted); }
.pet-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.react-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  font-size: .95rem; user-select: none; line-height: 1.3;
}
.react-chip:hover { border-color: var(--accent); }
.react-chip.on { border-color: var(--accent); background: var(--card-translucent); }
.react-chip .n { font: .8rem var(--mono); color: var(--muted); }
.react-chip.on .n { color: var(--accent-ink); }
.pet-del {
  align-self: flex-start; margin-top: 4px; background: none; border: none; cursor: pointer;
  font: .74rem var(--mono); color: var(--muted); text-decoration: underline; padding: 0;
}
.pet-del:hover { color: var(--accent); }

.pet-empty { color: var(--muted); text-align: center; padding: 40px 0; }
#pet-sentinel { height: 1px; }

/* Pet-of-the-day — compact card tucked under the sign-in box (hero column 2).
   The .hero-side wrapper holds the desk box + this card and owns the column-2
   grid slot (overrides header.hero > :not(.hero-desk){grid-column:1}). */
header.hero > .hero-side { grid-column: 2; grid-row: 1 / span 12; align-self: start; }
.pet-day-side {
  display: block; margin-top: 14px; text-decoration: none;
  background: var(--card-translucent); border: 1px solid var(--line); padding: 14px;
}
.pet-day-side[hidden] { display: none; }              /* beats .pet-day-side{display:block} */
.pet-day-side:hover { border-color: var(--accent); }
.pet-day-kicker { display: block; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.pet-day-side img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; background: var(--bg); }
.pet-day-name { margin: 10px 0 2px; font-weight: 600; color: var(--ink); }
.pet-day-meta { margin: 0; font: .8rem var(--mono); color: var(--muted); }