/* Perch · the Vet, the free Feed button and the "most fed today" board, in the Hatchery's look (cream cards on paper,
   deep green ink, Plus Jakarta Sans / Inter / JetBrains Mono). Red, amber and green only ever mark findings. */
:root { --red: #C2593B; --amber: #D99A22; }

/* the Feed button and the Vet chip, in the hatched coin's card */
.card-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.feed { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 13px; padding: 10px 14px 10px 12px; background: #E6F4DF; color: var(--leaf); font: 700 15px Inter, sans-serif; cursor: pointer; transition: transform .15s; }
.feed:hover { transform: translateY(-1px); }
.feed svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.feed b { font: 700 12.5px 'JetBrains Mono', monospace; background: var(--cream); color: var(--ink); border-radius: 8px; padding: 2px 7px; }
.feed.pop { animation: feedpop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes feedpop { 40% { transform: scale(1.08); } }
.vet-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 12px; text-decoration: none; background: rgba(18, 48, 42, .06); font: 700 12.5px 'JetBrains Mono', monospace; color: var(--ink); }
.vet-chip i { width: 9px; height: 9px; border-radius: 50%; background: rgba(18, 48, 42, .3); }
.vet-chip.run i { animation: beat 1.4s ease-in-out infinite; background: var(--live); }
.vet-chip.red { background: #F8E0D8; color: #8E2A12; } .vet-chip.red i { background: var(--red); }
.vet-chip.watch { background: #FFF0C7; color: #7A5200; } .vet-chip.watch i { background: var(--amber); }
.vet-chip.clear { background: #E6F4DF; color: var(--leaf); } .vet-chip.clear i { background: var(--live); }

/* the section */
.vet { padding: 100px max(24px, 6vw) 20px; max-width: 1320px; margin: 0 auto; }
.vet-head { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; align-items: center; }
.vet-doc { width: 210px; height: auto; display: block; filter: drop-shadow(0 18px 18px rgba(18, 48, 42, .18)); }
.vet-head .sec-head { margin: 0; }
.vet-body { margin-top: 28px; }
.vet-idle { background: var(--cream); border-radius: 26px; padding: 22px 24px; box-shadow: var(--shadow-s); }
.vet-cta { margin: 0 0 14px; font: 800 20px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.vet-diff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.vet-diff li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.vet-diff li::before { content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }
.vet-diff b { color: var(--ink); }

/* the checklist while it reads */
.vet-run { background: var(--cream); border-radius: 26px; padding: 22px 24px; box-shadow: var(--shadow-s); }
.vet-run-title { margin: 0 0 14px; font: 800 20px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.vet-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vet-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; align-items: center; font: 600 14.5px Inter, sans-serif; color: var(--ink-2); }
.vet-steps li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(18, 48, 42, .2); }
.vet-steps li.running { color: var(--ink); }
.vet-steps li.running i { border-color: var(--live); border-right-color: transparent; animation: spin .8s linear infinite; }
.vet-steps li.done i { border-color: var(--live); background: var(--live) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% no-repeat; }
.vet-steps li.skipped i { border-color: var(--amber); background: #FFF0C7; }
.vet-steps li small { grid-column: 2; font: 500 12.5px Inter, sans-serif; color: var(--ink-2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* the card */
.vet-card { background: var(--cream); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; }
.vc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 26px 20px; border-top: 8px solid var(--live); }
.vc-top.red { border-top-color: var(--red); } .vc-top.watch { border-top-color: var(--amber); }
.vc-badge { display: inline-block; margin: 0 0 8px; padding: 5px 10px; border-radius: 8px; font: 700 11.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--live); }
.vc-top.red .vc-badge { background: var(--red); } .vc-top.watch .vc-badge { background: var(--amber); }
.vc-top h3 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.03em; }
.vc-line { margin: 8px 0 0; max-width: 46em; font: 600 18px/1.4 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; }
.vc-when { margin: 0; font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-2); white-space: nowrap; }
.vfind { list-style: none; margin: 0; padding: 4px 26px 18px; display: grid; gap: 8px; }
.vfind li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: baseline; font-size: 15.5px; }
.vfind li i { width: 12px; height: 12px; border-radius: 50%; transform: translateY(1px); }
.vfind li.red i { background: var(--red); } .vfind li.amber i { background: var(--amber); } .vfind li.info i { background: rgba(18, 48, 42, .3); } .vfind li.good i { background: var(--live); }
.vfind li.good, .vfind li.info { color: var(--ink-2); }
.vfind a { font: 600 12px 'JetBrains Mono', monospace; color: var(--leaf); white-space: nowrap; }
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.vgrid section { background: var(--cream); padding: 18px 26px 20px; }
.vgrid h4 { margin: 0 0 10px; font: 700 11.5px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.vlist b { color: var(--ink); }
.vlist .tie { color: #8E2A12; }
.vlist a, .vn-dev a, .vn-none a { color: var(--leaf); font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.vn-none, .vn-dev { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.vn-dev { margin-bottom: 10px; }
.vbar { margin-bottom: 12px; }
.vbar p { margin: 0 0 5px; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.vbar p span { font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-2); }
.vb-track { position: relative; height: 12px; border-radius: 99px; background: rgba(18, 48, 42, .07); overflow: hidden; }
.vb-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.vb-track .then { background: rgba(194, 89, 59, .28); }
.vb-track .now { background: var(--red); }
.vwatch { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 10px 12px; border-radius: 14px; background: #EEF1F6; font-size: 14px; color: var(--ink-2); }
.vwatch img { flex: none; }
.vwatch b { color: var(--ink); }
.veggs { display: flex; flex-wrap: wrap; gap: 6px; }
.vegg { display: inline-block; width: 22px; height: 28px; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; vertical-align: -6px; }
.vegg.rotten { background: #B9B39A; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .12); position: relative; }
.vegg.rotten::after { content: ''; position: absolute; left: 4px; right: 4px; top: 11px; height: 3px; background: linear-gradient(90deg, transparent 0 20%, #7C765F 20% 40%, transparent 40% 60%, #7C765F 60% 80%, transparent 80%); }
.vegg.hatched { background: #FCF2DF; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .08), 0 0 0 1px rgba(18, 48, 42, .12); }
.vegg.crowned { background: var(--gold); box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .12); }
.vn-key { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-2); }
.vn-key .vegg { width: 12px; height: 15px; margin-left: 8px; vertical-align: -3px; }
.vn-key .vegg:first-child { margin-left: 0; }
.vc-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 26px 22px; border-top: 1px solid var(--line); }
.vc-actions .fine { color: var(--ink-2); font-size: 13px; max-width: 46em; }
.vc-notes { margin: 0; padding: 0 26px 18px; font-size: 13px; color: var(--ink-2); }

/* most fed today */
.fed { padding: 40px max(24px, 6vw) 0; max-width: 1320px; margin: 0 auto; }
.fed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.fed-head h3 { font-size: clamp(26px, 2.8vw, 34px); }
.fed-head p { margin: 0; max-width: 40em; color: var(--ink-2); font-size: 15px; }
.fed-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fed-list button { width: 100%; display: grid; grid-template-columns: 26px 1fr auto 10px; align-items: center; gap: 10px; border: 0; background: var(--cream); border-radius: 14px; padding: 11px 14px; box-shadow: var(--shadow-s); cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.fed-list button:hover { transform: translateY(-1px); }
.fed-list .rk { font: 800 15px 'Plus Jakarta Sans', sans-serif; color: var(--leaf); }
.fed-list b { font: 700 14px 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fed-list .sd { font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-2); }
.fed-list .vd { width: 10px; height: 10px; border-radius: 50%; }
.fed-list .vd.red { background: var(--red); } .fed-list .vd.watch { background: var(--amber); } .fed-list .vd.clear { background: var(--live); }
.fed-empty { padding: 16px; border: 1.5px dashed rgba(18, 48, 42, .2); border-radius: 14px; color: var(--ink-2); font-size: 14px; }

@media (max-width: 860px) {
  .vet { padding: 60px 16px 10px; }
  .vet-head { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; }
  .vet-doc { width: 110px; }
  .vet-head .sec-head h2 { font-size: 30px; }
  .vet-head .lede { font-size: 15px; }
  .vet-diff { grid-template-columns: 1fr; }
  .vet-idle, .vet-run { padding: 18px; border-radius: 22px; }
  .vc-top { flex-direction: column; gap: 6px; padding: 18px 18px 14px; }
  .vfind { padding: 4px 18px 16px; }
  .vfind li { grid-template-columns: 12px 1fr; font-size: 14.5px; }
  .vfind a { grid-column: 2; }
  .vgrid { grid-template-columns: 1fr; }
  .vgrid section { padding: 16px 18px; }
  .vc-actions { padding: 16px 18px 20px; }
  .fed { padding: 30px 16px 0; }
  .fed-list { grid-template-columns: 1fr; }
}
html[data-motion="off"] :is(.vet-chip.run i, .vet-steps li.running i, .feed.pop) { animation: none; }