/* Perch · check a coin before you ape. The summary card in the hero, how it works, live alerts and the watch sheet, in
   the Hatchery's look (cream cards, deep green ink, Plus Jakarta Sans / Inter / JetBrains Mono). Red, amber and green
   only ever mark findings and alerts. */
:root { --red: #C2593B; --amber: #D99A22; }

/* what a check-up gives you, under the paste box before any check */
.gets { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.gets li { padding: 8px 12px; border-radius: 999px; background: rgba(255, 248, 234, .82); font: 500 13.5px Inter, sans-serif; color: var(--ink-2); }
.gets b { color: var(--ink); font-weight: 700; }

/* the summary card */
.sum { margin-top: 18px; max-width: 540px; background: var(--cream); border-radius: 22px; padding: 18px 20px 16px; box-shadow: var(--shadow); animation: rise .5s cubic-bezier(.2, .9, .25, 1); }
.sum-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sum-sym { font: 800 26px/1.05 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-pill { padding: 5px 10px; border-radius: 8px; font: 700 11.5px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; background: rgba(18, 48, 42, .08); color: var(--ink); }
.sum-pill.run { background: #E6F4DF; color: var(--leaf); animation: beat 1.6s ease-in-out infinite; }
.sum-pill.red { background: var(--red); color: #fff; } .sum-pill.watch { background: var(--amber); color: #fff; } .sum-pill.clear { background: var(--leaf); color: #fff; }
.sum-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px 'JetBrains Mono', monospace; color: var(--leaf); }
.sum-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: beat 2s ease-in-out infinite; }
.sum-line { margin: 10px 0 0; font: 700 17px/1.35 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; }
.sum-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.sum-steps li { display: flex; align-items: center; gap: 10px; font: 600 13.5px Inter, sans-serif; color: var(--ink-2); }
.sum-steps li i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(18, 48, 42, .2); }
.sum-steps li.running { color: var(--ink); }
.sum-steps li.running i { border-color: var(--live); border-right-color: transparent; animation: spin .8s linear infinite; }
.sum-steps li.done i { border-color: var(--live); background: var(--live); }
.sum-steps li.skipped i { border-color: var(--amber); background: #FFF0C7; }
@keyframes spin { to { transform: rotate(360deg); } }
.sum-stats { margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sum-stats div { background: #fff; border-radius: 14px; padding: 10px 10px 9px; min-width: 0; }
.sum-stats dt { font: 600 10.5px/1.25 'JetBrains Mono', monospace; color: var(--ink-2); letter-spacing: .02em; }
.sum-stats dd { margin: 6px 0 0; font: 800 19px/1.05 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sum-stats dd.bad { color: var(--red); }
.sum-alert { margin: 12px 0 0; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #EEF1F6; font-size: 14px; animation: rise .45s cubic-bezier(.2, .9, .25, 1); }
.sum-alert.bad { background: #F8E0D8; } .sum-alert.good { background: #E6F4DF; }
.sum-alert time { font: 600 11px 'JetBrains Mono', monospace; color: var(--ink-2); }
.sum-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sum-actions .btn { text-decoration: none; }

/* how it works */
.how { padding: 100px max(24px, 6vw) 40px; max-width: 1320px; margin: 0 auto; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how-steps li { background: var(--cream); border-radius: 26px; padding: 24px 24px 26px; box-shadow: var(--shadow-s); }
.how-steps .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--brand); font: 800 19px 'Plus Jakarta Sans', sans-serif; }
.how-steps h3 { margin-top: 16px; font-size: 24px; letter-spacing: -.025em; }
.how-steps p { margin: 8px 0 0; color: var(--ink-2); font-size: 15.5px; }
.how-proof { margin-top: 16px; display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; background: var(--ink); color: var(--cream); border-radius: 30px; padding: 26px 34px 26px 22px; }
.how-proof img { width: 220px; height: auto; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .35)); }
.how-proof .kicker { color: #9FE08F; }
.how-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; }
.how-proof li { color: rgba(255, 248, 234, .74); font-size: 15.5px; }
.how-proof li b { display: block; color: var(--cream); font: 700 17px 'Plus Jakarta Sans', sans-serif; margin-bottom: 3px; }

/* the full check-up under the hero (the card itself is styled in vet.css) */
#check { padding-top: 60px; }

/* live alerts */
.alerts { padding: 60px max(24px, 6vw) 50px; max-width: 1000px; margin: 0 auto; }
.alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alist li { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 12px; background: var(--cream); border-radius: 16px; padding: 10px 14px 10px 10px; box-shadow: var(--shadow-s); border-left: 4px solid transparent; }
.alist li.bad { border-left-color: var(--red); } .alist li.good { border-left-color: var(--live); }
.alist li.new { animation: rise .5s cubic-bezier(.2, .9, .25, 1); }
.alist p { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.alist p b { font: 800 16px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; }
.alist .acoin { border: 0; background: rgba(18, 48, 42, .07); border-radius: 7px; padding: 2px 7px; font: 700 12.5px 'JetBrains Mono', monospace; color: var(--ink); cursor: pointer; }
.alist span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); }
.alist time { font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-2); }
.alist a { font: 700 14px 'JetBrains Mono', monospace; color: var(--leaf); text-decoration: none; }
.aempty { display: block !important; padding: 22px; border: 1.5px dashed rgba(18, 48, 42, .2); border-radius: 16px; text-align: center; color: var(--ink-2); box-shadow: none !important; background: transparent !important; }
.mine { margin-bottom: 18px; background: #E6F4DF; border-radius: 20px; padding: 16px 18px; }
.mine h3 { font-size: 19px; margin: 0 0 8px; }
.mrow { padding: 10px 0; border-top: 1px solid rgba(18, 48, 42, .1); }
.mrow:first-of-type { border-top: 0; }
.mtop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mtop b { font: 800 17px 'Plus Jakarta Sans', sans-serif; }
.mtop span { font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-2); }
.mrow form { margin-top: 8px; display: flex; gap: 6px; }
.mrow input { flex: 1; min-width: 0; border: 1.5px solid rgba(18, 48, 42, .14); border-radius: 9px; padding: 8px 10px; font: 500 12px 'JetBrains Mono', monospace; background: #fff; }
.hooknote { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.hooknote.err { color: #8E2A12; }

/* the watch sheet */
.fsheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(18, 48, 42, .45); padding: 16px; }
.fsheet-card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border-radius: 24px; padding: 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.fsheet-card .x { position: absolute; right: 12px; top: 10px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.fsheet-card h3 { font-size: 26px; padding-right: 24px; }
.fsheet-card p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.fsheet-card .fine { font-size: 13px; }
.wl { margin: 10px 0 0; padding-left: 20px; color: var(--ink); font-size: 15px; display: grid; gap: 4px; }
.sheet-go { margin-top: 16px; width: 100%; text-decoration: none; }
.fsheet-card .opts { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fsheet-card .opts button { border: 1.5px solid rgba(18, 48, 42, .14); background: #fff; border-radius: 11px; padding: 10px 4px; font: 700 13px 'JetBrains Mono', monospace; cursor: pointer; }
.fsheet-card .opts button.on { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.sum-box { margin-top: 14px; background: #fff; border-radius: 14px; padding: 12px 14px; font: 600 13px/1.6 'JetBrains Mono', monospace; color: var(--ink-2); }
.sum-box b { color: var(--ink); }
.fsheet-card .wallets { margin-top: 12px; display: grid; gap: 6px; }
.fsheet-card .wallets button { display: flex; align-items: center; gap: 10px; border: 1.5px solid rgba(18, 48, 42, .14); background: #fff; border-radius: 12px; padding: 10px 12px; font: 600 15px Inter, sans-serif; cursor: pointer; }
.fsheet-card .wallets img { width: 26px; height: 26px; border-radius: 7px; }
.fsheet-card .msg { margin-top: 10px; font-size: 14px; }
.fsheet-card .msg.err { color: #8E2A12; }
.fsheet-card form { margin-top: 12px; display: flex; gap: 6px; }
.fsheet-card input { flex: 1; min-width: 0; border: 1.5px solid rgba(18, 48, 42, .14); border-radius: 10px; padding: 10px; font: 500 12.5px 'JetBrains Mono', monospace; }

@media (max-width: 860px) {
  .gets { margin-top: 14px; }
  .gets li { font-size: 12.5px; padding: 7px 10px; }
  .sum { padding: 16px; }
  .sum-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { padding: 60px 16px 30px; }
  .how-steps { grid-template-columns: 1fr; gap: 10px; }
  .how-steps li { padding: 18px; border-radius: 22px; }
  .how-proof { grid-template-columns: 1fr; padding: 20px; gap: 10px; }
  .how-proof img { width: 150px; }
  .how-proof ul { grid-template-columns: 1fr; }
  #check { padding-top: 40px; }
  .alerts { padding: 40px 16px 40px; }
  .alist li { grid-template-columns: 34px 1fr auto; padding: 9px 10px; gap: 10px; }
  .alist li img { width: 34px; height: 34px; }
  .alist li a { display: none; }
  .fsheet { align-items: end; padding: 0; }
  .fsheet-card { width: 100%; border-radius: 22px 22px 0 0; max-height: 88vh; }
}
html[data-motion="off"] :is(.sum-pill.run, .sum-live i, .sum-steps li.running i, .alist li.new, .sum, .sum-alert) { animation: none; }