/* Shared in-app feature mockups (lock screen, harbor bulletin, replay tape,
   channel bank) — the app's night colors, hand-built. Used by the homepage
   AND the marinas page so the two can never drift. Colors are self-contained
   (no dependence on each page's CSS variables). */

.mock { width: 320px; border-radius: 30px; border: 9px solid #0B2545; overflow: hidden;
  background: #0D1B2E; box-shadow: 0 24px 60px #0B254529; flex: none; }
.mock-cap { text-align: center; font-size: 13.5px; color: #5B6B7E; font-weight: 700; margin-top: 12px; }

/* Push notifications: a lock screen. */
.lockscreen { padding: 26px 12px 30px; background:
  radial-gradient(120% 90% at 50% 0%, #16304F 0%, #0D1B2E 62%); }
.lock-clock { text-align: center; color: #E9F0F8; font-size: 44px; font-weight: 200; letter-spacing: 1px; }
.lock-date { text-align: center; color: #9FB2C8; font-size: 13px; font-weight: 600; margin-bottom: 22px; }
.notif { background: #FFFFFFF0; border-radius: 16px; padding: 11px 13px; margin: 0 4px 10px;
  display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 8px 24px #00000040; }
.notif img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.notif .n-body { min-width: 0; }
.notif .n-app { font-size: 11px; font-weight: 800; color: #5B6B7E; letter-spacing: 0.4px; display: flex; gap: 6px; }
.notif .n-title { font-size: 13.5px; font-weight: 800; color: #10233F; line-height: 1.3; }
.notif .n-text { font-size: 12.5px; color: #44546A; line-height: 1.35; }
.notif.urgent { border-left: 4px solid #E63946; }
.notif:first-of-type { animation: notifin 0.9s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes notifin { from { transform: translateY(-24px); opacity: 0; } }

/* Harbor bulletin rows, exactly as the app draws them. */
.bullscreen { padding: 14px 12px 20px; background: #FAF6EC; }
.bull-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.bull-tab { font-size: 10px; font-weight: 900; letter-spacing: 0.8px; border-radius: 999px;
  padding: 6px 11px; color: #5B6B7E; border: 1px solid #E3DAC4; background: #FFF; }
.bull-tab.on { background: #FFD60A; color: #201A00; border-color: #FFD60A; }
.bullrow { background: #FFF; border: 1px solid #E3DAC4; border-left: 4px solid #E63946;
  border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; }
.bullrow .b-kind { font-size: 9.5px; font-weight: 900; letter-spacing: 1.4px; color: #E63946; }
.bullrow .b-when { float: right; font-size: 10.5px; color: #5B6B7E; font-weight: 700; }
.bullrow .b-title { font-size: 14.5px; font-weight: 900; color: #0B2545; line-height: 1.25; margin: 2px 0; }
.bullrow .b-loc { font-size: 12px; color: #5B6B7E; }
.bullrow .b-hear { font-size: 11px; font-weight: 800; color: #17406B; margin-top: 5px; }
.bullrow.nav2 { border-left-color: #0E7490; } .bullrow.nav2 .b-kind { color: #0E7490; }
.bullrow.exer { border-left-color: #D9480F; } .bullrow.exer .b-kind { color: #D9480F; }

/* The catch-up tape: replay bar + caption, the app's player. */
.tapescreen { position: relative; height: 430px; background:
  radial-gradient(90% 60% at 72% 30%, #17273E 0%, transparent 52%),
  radial-gradient(70% 45% at 12% 68%, #17273E 0%, transparent 45%),
  #0D1B2E; display: flex; flex-direction: column; justify-content: flex-end; }
.rewind-pill { position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: #13294AF2; color: #E9F0F8; font-size: 10.5px; font-weight: 900; letter-spacing: 1.2px;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.rewind-pill b { color: #FFD60A; }
.cap-prev { color: #93A3B8; font-size: 13.5px; line-height: 1.35; padding: 0 16px; margin-bottom: 6px; }
.cap-now { color: #F5F8FC; font-size: 17.5px; font-weight: 800; line-height: 1.3; padding: 0 16px; margin-bottom: 14px; }
.playbar { background: #FFD60A; padding: 9px 12px 12px; }
.playbar .pb-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; color: #141000; }
.playbar .pb-top .x { margin-left: auto; font-weight: 900; }
.chappill { width: fit-content; margin: 7px auto 6px; background: #141000; color: #FFD60A;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1px; border-radius: 999px; padding: 4px 12px; }
.pb-row { display: flex; align-items: center; gap: 9px; }
.pb-play { width: 34px; height: 34px; border-radius: 50%; background: #141000; color: #FFD60A;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.pb-tape { flex: 1; position: relative; height: 26px; border-radius: 7px; background: #00000012; overflow: hidden; }
.pb-tape i { position: absolute; top: 7px; height: 12px; border-radius: 6px; background: #64B6E8; }
.pb-tape i.dark { background: #8A7500; }
.pb-tape .ph { position: absolute; top: 0; bottom: 0; left: 46%; width: 2px; background: #141000; }
.pb-clock { font-size: 10px; font-weight: 900; color: #141000; text-align: center; margin-top: 5px; }

/* The channel bank. */
.chscreen { padding: 18px 14px 22px; background:
  radial-gradient(110% 70% at 50% -10%, #14283F 0%, #0D1B2E 60%); }
.ch-title { color: #E9F0F8; font-size: 13px; font-weight: 900; letter-spacing: 1.5px; margin-bottom: 4px; }
.ch-sub { color: #93A3B8; font-size: 11.5px; margin-bottom: 14px; }
.chgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ch { background: #13223A; border: 1px solid #22385C; border-radius: 10px; padding: 8px 4px;
  text-align: center; color: #C9D6E6; min-width: 0; }
.ch .c-no { font-size: 14px; font-weight: 900; }
.ch .c-use { font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; color: #7E92AB; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch .c-dot { width: 7px; height: 7px; border-radius: 50%; background: #34C759; margin: 5px auto 0;
  box-shadow: 0 0 0 3px #34C75922; }
.ch.live { border-color: #34C75966; }
.ch.live .c-no { color: #FFF; }
.ch.talking { border-color: #FFD60A; background: #2A2410; }
.ch.talking .c-no { color: #FFD60A; }
.ch.talking .c-dot { background: #FFD60A; box-shadow: 0 0 0 3px #FFD60A33; animation: chblink 1.2s infinite; }
@keyframes chblink { 50% { opacity: 0.35; } }
.ch-listen { margin-top: 14px; background: #FFD60A; border-radius: 10px; color: #141000;
  font-size: 12px; font-weight: 900; text-align: center; padding: 10px; }

@media (max-width: 760px) {
  .mock { width: min(320px, calc(100vw - 52px)); }
}