/* The woodland scene is the feature's focal point; the surrounding controls
   inherit LGSD typography and switch with its two accountability themes. */
.pet-page,.pet-dashboard {
  --pet-ink:#193e38;
  --pet-muted:#516c66;
  --pet-panel:#fff;
  --pet-border:#ccded9;
  --pet-accent:#246955;
  color:var(--pet-ink);
}

.pet-theme-dark {
  --pet-ink:#edf6f2;
  --pet-muted:#b8cec5;
  --pet-panel:#1f2937;
  --pet-border:#40564e;
  --pet-accent:#a8ddc2;
}

.pet-page {
  background:#f1f7f5;
  min-height:100vh;
  padding:32px 20px 64px;
}

.pet-page.pet-theme-dark {
  background:#111827;
}

.pet-page-inner {
  max-width:1088px;
  margin:auto;
}

.pet-back {
  color:var(--pet-muted);
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px;
}

.pet-page-heading {
  margin:28px 0;
}

.pet-page h1 {
  font-size:36px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.2;
}

.pet-page p {
  color:var(--pet-muted);
  line-height:1.65;
  margin:10px 0 18px;
  max-width:70ch;
}

.pet-page h2,.pet-dashboard h2 {
  font-size:21px;
  font-weight:750;
  line-height:1.3;
}

.pet-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  align-items:start;
}

.pet-sidebar {
  display:grid;
  gap:20px;
}

.pet-panel {
  border:1px solid var(--pet-border);
  background:var(--pet-panel);
  border-radius:14px;
  padding:26px;
}

.pet-habitat {
  overflow:hidden;
  border:1px solid var(--pet-border);
  border-radius:22px;
  background:var(--pet-panel);
}

.pet-habitat-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 24px;
  background:#e3f1ee;
  color:#214d46;
  font-weight:650;
}

.pet-badge {
  display:inline-block;
  font-size:12px;
  border:1px solid currentColor;
  border-radius:20px;
  padding:3px 10px;
  vertical-align:middle;
  font-weight:600;
}

.pet-habitat-scene {
  height:300px;
  background:linear-gradient(#e3f1ee 60%,#cde2ce 60%);
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

.pet-sun {
  position:absolute;
  right:48px;
  top:18px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#faf0bf;
}

.pet-creature {
  position:relative;
  width:100%;
  max-width:340px;
  height:auto;
  display:block;
}

.pet-creature--sick {
  filter:saturate(.55);
}

.pet-habitat-info {
  padding:26px 28px 30px;
}

.pet-habitat-info h2 {
  font-size:30px;
  letter-spacing:-.6px;
}

.pet-meter-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  margin:20px 0 8px;
  color:var(--pet-muted);
}

.pet-meter-label strong {
  color:var(--pet-ink);
  white-space:nowrap;
}

.pet-page progress {
  appearance:none;
  display:block;
  width:100%;
  height:10px;
  border:none;
  border-radius:8px;
  overflow:hidden;
  background:#dae6e2;
}

.pet-page progress::-webkit-progress-bar {
  background:#dae6e2;
  border-radius:8px;
}

.pet-page progress::-webkit-progress-value {
  background:#6a6eb3;
  border-radius:8px;
}

.pet-page progress::-moz-progress-bar {
  background:#6a6eb3;
  border-radius:8px;
}

.pet-page .pet-health::-webkit-progress-value {
  background:#3d9472;
}

.pet-page .pet-health::-moz-progress-bar {
  background:#3d9472;
}

.pet-page .pet-health--low::-webkit-progress-value {
  background:#c76c48;
}

.pet-page .pet-health--low::-moz-progress-bar {
  background:#c76c48;
}

.pet-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:1px solid #246955;
  border-radius:9px;
  background:#246955;
  color:#fff;
  padding:11px 18px;
  line-height:1.4;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  min-height:44px;
}

.pet-button:hover {
  background:#1c5142;
}

.pet-button--quiet {
  color:var(--pet-ink);
  background:transparent;
  border-color:var(--pet-border);
}

.pet-button--quiet:hover {
  background:#739d7a22;
}

.pet-page a:focus-visible,.pet-page input:focus-visible,.pet-page summary:focus-visible,.pet-dashboard a:focus-visible {
  outline:3px solid #4489d2;
  outline-offset:4px;
}

.pet-field {
  display:grid;
  gap:7px;
  margin:20px 0;
}

.pet-field label {
  font-size:14px;
  font-weight:650;
}

.pet-field input {
  border:1px solid var(--pet-border);
  border-radius:8px;
  background:var(--pet-panel);
  color:var(--pet-ink);
  padding:11px 12px;
  width:100%;
  min-width:0;
  font-size:16px;
}

.pet-consent {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color:var(--pet-muted);
  line-height:1.6;
  margin:18px 0;
}

.pet-consent input {
  margin-top:5px;
  flex-shrink:0;
  width:16px;
  height:16px;
}

.pet-rules ul {
  padding-left:20px;
  list-style:disc;
  margin-top:18px;
}

.pet-rules li {
  font-size:14px;
  line-height:1.7;
  margin-bottom:10px;
  color:var(--pet-muted);
}

.pet-rules strong {
  color:var(--pet-ink);
}

.pet-rules p {
  font-size:12px;
  margin-bottom:0;
}

.pet-rename {
  margin-top:22px;
  font-size:13px;
  color:var(--pet-muted);
}

.pet-rename summary {
  cursor:pointer;
  list-style:revert;
}

.pet-page .pet-warning {
  border-left:3px solid #bb6d3d;
  padding-left:12px;
  font-size:14px;
}

.pet-evolution {
  margin-top:24px;
}

.pet-stages {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  list-style:none;
  padding:0;
  margin:18px 0 0;
}

.pet-stages li {
  text-align:center;
  border-radius:10px;
  padding:12px 8px;
  background:#89a79c12;
  border:1px solid transparent;
}

.pet-stages li .pet-creature {
  opacity:.65;
}

.pet-stages .pet-stage--reached .pet-creature {
  opacity:1;
}

.pet-stages .pet-stage--reached {
  border-color:var(--pet-border);
}

.pet-stages [aria-current] {
  box-shadow:inset 0 -3px var(--pet-accent);
}

.pet-stages strong,.pet-stages span {
  display:block;
}

.pet-stages span {
  font-size:12px;
  color:var(--pet-muted);
  margin-top:5px;
}

.pet-journal {
  margin-top:24px;
}

.pet-journal ul {
  list-style:none;
  margin:16px 0 0;
  padding:0;
}

.pet-journal li {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-top:1px solid var(--pet-border);
  font-size:14px;
}

.pet-journal li span {
  overflow-wrap:anywhere;
}

.pet-journal strong {
  white-space:nowrap;
}

.pet-dashboard {
  display:flex;
  align-items:center;
  gap:24px;
  background:var(--pet-panel);
  border:1px solid var(--pet-border);
  border-radius:14px;
  padding:18px 24px;
  margin-bottom:24px;
}

.pet-dashboard-art {
  width:110px;
  flex-shrink:0;
  background:#e3f1ee;
  border-radius:12px;
}

.pet-dashboard-copy {
  flex:1;
}

.pet-dashboard p {
  font-size:13px;
  line-height:1.6;
  color:var(--pet-muted);
  margin-top:6px;
}

.pet-dashboard h2 {
  font-size:19px;
}

.pet-dashboard .pet-badge {
  margin-left:8px;
}

.pet-nav-link {
  display:inline-block;
  padding:8px 12px;
  color:#246955;
  font-size:14px;
  font-weight:650;
}

nav.bg-gray-900 .pet-nav-link {
  color:#a8ddc2;
}

.pet-nav-link:hover {
  text-decoration:underline;
}

@media(max-width:760px) {
  .pet-layout {
    grid-template-columns:1fr;
  }
  .pet-page {
    padding:24px 16px 40px;
  }
  .pet-page h1 {
    font-size:30px;
  }
  .pet-panel {
    padding:22px;
  }
  .pet-habitat-scene {
    height:260px;
  }
  .pet-stages {
    grid-template-columns:repeat(2,1fr);
  }
  .pet-dashboard {
    flex-wrap:wrap;
    gap:14px;
    padding:18px;
  }
  .pet-dashboard-art {
    width:78px;
  }
  .pet-dashboard-copy {
    min-width:170px;
  }
  .pet-dashboard>.pet-button {
    width:100%;
  }
  .pet-journal li {
    flex-wrap:wrap;
    gap:6px;
  }
}

.pet-nav-link--mobile {
  display: block;
  padding: 8px 0;
  font-size: 18px;
}