/* My City Channels — one engine, any city */
.mycc-city, .mycc-index { --mycc-ink:#0f2438; --mycc-muted:#4a6173; --mycc-blue:#086892; --mycc-line:#dbe4ec; --mycc-bg:#f6f9fc; max-width:1180px; margin:0 auto; padding:0 16px; color:var(--mycc-ink); }
.mycc-city h1 { font-size:clamp(30px,5vw,52px); line-height:1.06; margin:10px 0 8px; }
.mycc-city .mycc-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; color:var(--mycc-blue); }
.mycc-lede { font-size:clamp(16px,2vw,20px); color:var(--mycc-muted); max-width:70ch; margin:0 0 16px; }
.mycc-h2 { font-size:clamp(22px,3vw,32px); margin:0 0 6px; }
.mycc-sub { color:var(--mycc-muted); margin:0 0 16px; max-width:70ch; }
.mycc-hero { padding:26px 0 10px; }
.mycc-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.mycc-chip { background:#fff; border:1px solid var(--mycc-line); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--mycc-muted); }
.mycc-chip-live { background:#e8f6ee; border-color:#bfe6cf; color:#136c3a; }
.mycc-board, .mycc-nearby, .mycc-cta { padding:26px 0; border-top:1px solid var(--mycc-line); }
.mycc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.mycc-card { display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--mycc-line); border-radius:14px; padding:14px 16px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.mycc-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(8,104,146,.12); }
.mycc-card-city { font-weight:800; font-size:17px; color:var(--mycc-ink); }
.mycc-card-region { font-size:13px; color:var(--mycc-muted); }
.mycc-more { font-weight:700; }
.mycc-btn { display:inline-block; background:var(--mycc-blue); color:#fff !important; text-decoration:none; padding:13px 20px; border-radius:999px; font-weight:800; }
.mycc-cta { background:var(--mycc-bg); border-radius:18px; padding:26px; }

/* City search */
.mycc-search { position:relative; max-width:520px; }
.mycc-search-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--mycc-muted); margin-bottom:6px; }
.mycc-search-input { width:100%; padding:14px 16px; border:2px solid var(--mycc-line); border-radius:999px; font-size:16px; background:#fff; color:var(--mycc-ink); }
.mycc-search-input:focus { outline:none; border-color:var(--mycc-blue); }
.mycc-search-results { list-style:none; margin:8px 0 0; padding:6px; position:absolute; z-index:60; left:0; right:0; background:#fff; border:1px solid var(--mycc-line); border-radius:14px; box-shadow:0 16px 40px rgba(15,36,56,.16); max-height:320px; overflow:auto; }
.mycc-search-results li { margin:0; }
.mycc-search-results a { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--mycc-ink); }
.mycc-search-results a:hover, .mycc-search-results a.is-active { background:var(--mycc-bg); }
.mycc-search-results .r-region { color:var(--mycc-muted); font-size:13px; }
.mycc-search-go { display:inline-block; margin-top:10px; font-weight:700; }
.mycc-search.is-compact { max-width:420px; }
@media (max-width:600px) {
  .mycc-city, .mycc-index { padding:0 12px; }
  .mycc-cta { padding:18px; }
}
/* City header: city, local time, weather, live board */
.mycc-skybar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:#0f2438; color:#eaf3fb; border-radius:14px; padding:12px 16px; margin:18px 0 6px; font-size:14px; }
.mycc-sky-city { font-weight:800; letter-spacing:.02em; }
.mycc-sky-time { opacity:.85; }
.mycc-sky-wx { font-weight:700; }
.mycc-sky-wx em { font-style:normal; font-weight:500; opacity:.85; }
.mycc-sky-live { margin-left:auto; color:#8ff0b0; font-weight:700; }
@media (max-width:600px) { .mycc-sky-live { margin-left:0; } }

/* Portable layer: keeps the picker above fixed overlays. A cookie notice can sit at
   z-index 2147483647 over the middle of a phone screen and swallow taps aimed at the
   picker, so the picker moves into this layer on first use. */
.mycc-portal { --mycc-ink:#0f2438; --mycc-muted:#4a6173; --mycc-blue:#086892; --mycc-line:#dbe4ec; --mycc-bg:#f6f9fc; color:var(--mycc-ink); }
.mycc-portal .mycc-search { max-width:100%; }
.mycc-spacer { display:block; width:100%; }

/* ---- Home channel front door: app shell ---- */
.mycc-front-door { background:#f4f7fb; border:1px solid #e3ebf3; border-radius:18px; padding:14px; margin:0 0 18px; box-shadow:0 20px 48px -34px rgba(2,6,23,.5); }
.mycc-front-door .mycc-skybar { border-radius:14px; }
/* Headline ticker. The kicker badge sits on its own line on narrow screens, otherwise it
   squeezes the scrolling area down to a few pixels and the headlines are never visible.
   The two copies of the list are separated by the span padding alone (no flex gap) so the
   loop rejoins seamlessly. */
.mycc-ticker-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:10px 0 0; background:#fff; border:1px solid #e3ebf3; border-radius:12px; padding:8px 12px; overflow:hidden; }
.mycc-ticker-kicker { flex:0 0 auto; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#086892; background:#e8f3fa; border-radius:999px; padding:5px 10px; }
.mycc-ticker { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; position:relative; }
.mycc-ticker-track { display:inline-flex; animation:mycc-ticker-scroll 90s linear infinite; will-change:transform; }
.mycc-ticker-track span { padding-right:44px; color:#0f2438; font-size:14px; }
@keyframes mycc-ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.mycc-ticker-hold { color:#4a6173; font-size:13px; }
@media (max-width: 760px) {
  .mycc-ticker-kicker { flex:1 1 100%; text-align:center; }
  .mycc-ticker { flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .mycc-ticker-track { animation:none; white-space:normal; display:block; } }
.mycc-fd-row { display:grid; gap:12px; margin-top:12px; }
.mycc-fd-picker { background:#fff; border:1px solid #e3ebf3; border-radius:12px; padding:10px 12px; }
.mycc-fd-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px; }
.mycc-fd-btn { display:flex; align-items:center; justify-content:center; text-align:center; min-height:52px; padding:12px 14px; border-radius:12px; background:#0f2438; color:#fff !important; font-weight:700; text-decoration:none; box-shadow:0 12px 26px -18px rgba(2,6,23,.65); }
.mycc-fd-btn.is-ghost { background:#fff; color:#0f2438 !important; border:1px solid #cfdbe6; box-shadow:none; }
.mycc-fd-btn:active { transform:translateY(1px); }

/* ---- Explainers ---- */
.mycc-explain { display:grid; gap:12px; margin:14px 0 0; }
.mycc-explain-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.mycc-explain-card { background:#fff; border:1px solid #e3ebf3; border-radius:14px; padding:14px 16px; }
.mycc-explain-card h3 { margin:0 0 6px; font-size:16px; color:#0f2438; }
.mycc-explain-card p { margin:0; color:#4a6173; font-size:14px; line-height:1.5; }
.mycc-steps { counter-reset:mycc-step; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.mycc-step { counter-increment:mycc-step; position:relative; background:#fff; border:1px solid #e3ebf3; border-radius:14px; padding:12px 14px 12px 46px; }
.mycc-step::before { content:counter(mycc-step); position:absolute; left:12px; top:12px; width:22px; height:22px; border-radius:50%; background:#086892; color:#fff; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.mycc-step strong { display:block; color:#0f2438; font-size:14px; }
.mycc-step span { color:#4a6173; font-size:13px; }