/* College for Pets hub — brand styles
 * Palette pulled from collegeforpets.com: sage #6c8559, olive-gold accents,
 * red reserved for emergencies. Mobile-first. */
:root{
  --sage:#6c8559; --sage-tint:#ebefe4; --sage-deep:#4e5f41;
  --gold-tint:#f3edd9; --gold-deep:#6b5713;
  --red:#791f1f; --red-tint:#fcebeb; --red-border:#f09595;
  --ink:#1f2419; --muted:#6b7363; --faint:#9aa091;
  --line:#e4e7df; --card:#ffffff; --bg:#f4f5f1;
  --radius:14px; --radius-sm:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--card)}
a{text-decoration:none;color:inherit}

.hdr{background:var(--sage);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.hdr .brand{font-size:12px;color:#eef3e6;letter-spacing:.3px}
.hdr .title{font-size:20px;color:#fff;font-weight:600}
.hdr .lock{font-size:18px;color:#cdd9bd}
.badge{background:var(--gold-tint);color:var(--gold-deep);font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.3px}

.signedin{background:var(--sage-tint);padding:9px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#3f4d35}
.signedin .who{display:flex;align-items:center;gap:7px}
.signedin .who .ti{font-size:15px;color:var(--sage-deep)}
.signedin .out{color:#7c8a6f}

.wrap{padding:16px}
.hint{font-size:14px;color:var(--muted);margin:0 0 12px}
.seclabel{font-size:12px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin:4px 0 10px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;cursor:pointer}
.tile:active{transform:scale(.98)}
.tile .label{font-size:15px;font-weight:600}
.chip{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--sage-tint);color:var(--sage-deep)}
.chip.gold{background:var(--gold-tint);color:var(--gold-deep)}
.chip.danger{background:var(--red-tint);color:var(--red)}
.tile.danger{border-color:var(--red-border)}
.tile.danger .label{color:var(--red)}

.minigrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.mini{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 6px;display:flex;flex-direction:column;gap:6px;align-items:center;cursor:pointer}
.mini .label{font-size:11px;text-align:center;line-height:1.2}
.minichip{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--sage-tint);color:var(--sage-deep)}
.minichip.gold{background:var(--gold-tint);color:var(--gold-deep)}
.minichip.danger{background:var(--red-tint);color:var(--red)}

.divider{border-top:1px solid var(--line);margin:18px 0 12px}
.foot{font-size:12px;color:var(--faint);text-align:center;margin-top:18px}

.back{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0;display:flex;align-items:center;gap:4px;margin-bottom:4px}
.page-title{font-size:20px;font-weight:600;margin:10px 0 4px}
.page-tag{font-size:12px;color:var(--faint);margin-bottom:16px;display:flex;align-items:center;gap:6px}
.page-tag.lead{color:var(--gold-deep)}

.list{display:flex;flex-direction:column;gap:8px}
.row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;display:flex;align-items:center;justify-content:space-between;font-size:15px;cursor:pointer}
.row .ti{color:var(--faint)}
.row:active{transform:scale(.99)}

.placeholder{border:1px dashed var(--line);border-radius:var(--radius);padding:22px 16px;text-align:center;color:var(--muted);background:#fafbf8}
.placeholder .ti{font-size:26px;color:var(--sage);display:block;margin-bottom:8px}
.placeholder .small{font-size:12px;color:var(--faint);margin-top:8px}

/* Filled card content (from content.json) */
.wrap h4{font-size:13px;color:var(--muted);margin:16px 0 2px;font-weight:600}
.wrap p,.wrap li{font-size:15px;line-height:1.55}
.wrap .cd-flag{background:var(--gold-tint);color:#5a4a13;border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0;font-size:14px}
.wrap .cd-check{list-style:none;padding:0}
.wrap .cd-check li{padding-left:24px;position:relative}
.wrap .cd-check li:before{content:"\2610";position:absolute;left:0;color:var(--faint)}
.wrap .cd-meta{border-top:1px solid var(--line);margin-top:16px;padding-top:10px;font-size:12px;color:var(--faint)}