@charset "utf-8";
/* =============================================================
   VECO Brownout Updates
   Light theme only, in the utility's own colours.
   ============================================================= */

@font-face{font-family:Lato;src:url(../fonts/lato-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --navy:#221e5b;
  --navy-2:#2e2a75;
  --navy-3:#171442;
  --blue:#2aa9e0;
  --blue-dark:#166f9c;
  --blue-wash:#eaf6fd;

  --bg:#f4f6fb;
  --card:#fff;
  --line:#e3e7f0;
  --line-soft:#eef1f7;
  --text:#1f2233;
  --muted:#646b82;

  --ok:#17804a;
  --ok-wash:#e8f6ee;
  --warn:#b96504;
  --warn-wash:#fef4e6;
  --danger:#c81f1f;
  --danger-wash:#fdeceb;

  --r:14px;
  --r-sm:10px;
  --bar:60px;      /* fixed top bar */
  --sbar:64px;     /* floating search row */
  --shadow:0 1px 2px rgba(34,30,91,.05), 0 10px 28px rgba(34,30,91,.07);
  --shadow-lift:0 2px 4px rgba(34,30,91,.06), 0 18px 44px rgba(34,30,91,.13);
  --wrap:1090px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.58 Lato,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol{margin:0}
ul{list-style:none;padding:0}
a{color:var(--blue-dark);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:700}
button{font:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:#eef1f7;padding:.1em .38em;border-radius:5px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:#fff;padding:10px 14px;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

.muted{color:var(--muted)}
.sm{font-size:.9rem}
.h-sm{font-size:1.08rem;font-weight:900;letter-spacing:-.01em;color:var(--navy)}
.h-xs{font-size:.95rem;font-weight:900;letter-spacing:.01em;color:var(--navy);display:flex;align-items:center;gap:8px}
.sep{opacity:.45;margin:0 .35em}

/* ---------- top bar (fixed) ---------- */
body{padding-top:calc(var(--bar) + var(--sbar) + env(safe-area-inset-top))}
body.no-search{padding-top:calc(var(--bar) + env(safe-area-inset-top))}
.topbar{
  background:var(--navy);color:#fff;
  padding-top:env(safe-area-inset-top);
  position:fixed;top:0;left:0;right:0;z-index:40;
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--bar)}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  background:linear-gradient(150deg,#3a3490,#1d1950);border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:400;font-size:1.06rem;letter-spacing:-.01em}
.brand-name b{font-weight:900;color:#7fd7f5}
.brand-sub{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#9aa1d4;margin-top:3px}

.bar-right{display:flex;align-items:center;gap:14px;min-width:0}
.homebtn{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  color:#dfe3fa;font-size:.84rem;font-weight:700;text-decoration:none;
  padding:7px 13px 7px 11px;border-radius:999px;
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.homebtn:hover{background:rgba(255,255,255,.18);color:#fff;text-decoration:none}
.homebtn:active{transform:translateY(1px)}

.sync{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#b9bee4}
.sync-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.sync-dot.is-fresh{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18)}
.sync-dot.is-stale{background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.18)}
.sync-btn{
  color:#cdd2f0;border:0;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;
  border-radius:8px;background:rgba(255,255,255,.08);line-height:1;padding:0;
}
.sync-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.sync-btn.is-spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- floating search row ---------- */
.searchbar{
  position:fixed;left:0;right:0;z-index:35;
  top:calc(var(--bar) + env(safe-area-inset-top));
  height:var(--sbar);display:flex;align-items:center;
  background:var(--navy);
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .22s linear;
}
.searchbar::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.07);
}
body.scrolled .searchbar{transform:translateY(-100%);opacity:0;pointer-events:none}

.search{
  position:relative;display:flex;align-items:center;
  max-width:640px;background:#fff;border-radius:12px;
  box-shadow:0 1px 2px rgba(10,8,40,.14), 0 8px 20px rgba(10,8,40,.18);
  padding:5px;
}
.search-ico{display:grid;place-items:center;width:36px;flex:0 0 36px;color:#98a0b8}
.search input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;
  font:700 1rem/1.3 inherit;color:var(--text);padding:9px 4px;
}
.search input::placeholder{color:#a3aabd;font-weight:400}
.search input:focus{outline:0}
.search input::-webkit-search-cancel-button{display:none}
.search-clear{
  flex:0 0 auto;color:#98a0b8;font-size:1.3rem;line-height:1;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;text-decoration:none;
}
.search-clear:hover{background:#f1f3f9;color:var(--text);text-decoration:none}
.search-go{
  flex:0 0 auto;border:0;cursor:pointer;background:var(--navy);color:#fff;
  font-weight:900;font-size:.9rem;letter-spacing:.01em;
  padding:10px 18px;border-radius:9px;
}
.search-go:hover{background:var(--navy-2)}
.search-go:active{transform:translateY(1px)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(900px 320px at 12% -10%, rgba(42,169,224,.26), transparent 62%),
    linear-gradient(168deg,var(--navy) 0%, var(--navy) 44%, var(--navy-3) 100%);
  color:#fff;
  padding:26px 0 30px;
  overflow:hidden;
}
/* three faint diagonals — a nod to the utility's mark */
.hero::before{
  content:"";position:absolute;right:0;top:0;width:300px;height:100%;
  background:
    linear-gradient(135deg,transparent 46%,rgba(127,215,245,.16) 46%,rgba(127,215,245,.16) 50%,transparent 50%),
    linear-gradient(135deg,transparent 62%,rgba(127,215,245,.13) 62%,rgba(127,215,245,.13) 66%,transparent 66%),
    linear-gradient(135deg,transparent 78%,rgba(127,215,245,.10) 78%,rgba(127,215,245,.10) 82%,transparent 82%);
  pointer-events:none;
}
.hero-h1{
  font-weight:900;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.85rem,5.2vw,2.75rem);max-width:15ch;
}
.hero-p{margin-top:11px;color:#b9c0e8;font-size:1.01rem;max-width:44ch}

/* ---------- back to top ---------- */
.totop{
  position:fixed;right:20px;z-index:38;
  bottom:calc(20px + env(safe-area-inset-bottom));
  width:46px;height:46px;border:0;cursor:pointer;border-radius:50%;
  background:#fff;color:var(--navy);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(34,30,91,.10), 0 3px 8px rgba(10,8,40,.16), 0 12px 28px rgba(10,8,40,.20);
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .2s, transform .22s cubic-bezier(.4,0,.2,1), background .15s;
}
body.scrolled .totop{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--navy);color:#fff}
.totop:active{transform:translateY(1px)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;z-index:60;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  width:max-content;max-width:min(440px,calc(100vw - 32px));
  white-space:normal;overflow-wrap:break-word;text-align:center;
  background:#26293a;color:#fff;font-size:.92rem;line-height:1.45;
  padding:12px 16px;border-radius:11px;
  box-shadow:0 6px 18px rgba(10,8,40,.3);
  opacity:0;transition:opacity .2s, transform .22s;
}
.toast[hidden]{display:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow-lift);
  overflow:hidden;max-height:min(58vh,420px);overflow-y:auto;
}
.suggest[hidden]{display:none}
.sg{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:var(--text);
}
.sg:last-child{border-bottom:0}
.sg:hover,.sg.is-on{background:var(--blue-wash);text-decoration:none}
.sg-l{min-width:0}
.sg-name{display:block;font-weight:700;letter-spacing:-.01em}
.sg-meta{display:block;font-size:.82rem;color:var(--muted)}
.sg-kind{
  flex:0 0 auto;font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-dark);background:var(--blue-wash);padding:4px 8px;border-radius:999px;
}
.sg-kind.is-brgy{color:var(--muted);background:#f1f3f9}

/* ---------- layout ---------- */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:26px;
  align-items:start;padding-top:26px;padding-bottom:44px;
}
.col-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.col-side{
  display:flex;flex-direction:column;gap:16px;
  position:sticky;top:calc(var(--bar) + 20px);
}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-pad{padding:20px 22px}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--line-soft);
}
.card-foot{padding:12px 22px;border-top:1px solid var(--line-soft)}
.count-pill{
  font-size:.78rem;font-weight:900;color:var(--muted);background:#f1f3f9;
  padding:3px 10px;border-radius:999px;
}
.count-pill.count-hot{color:var(--danger);background:var(--danger-wash)}

/* ---------- verdict ---------- */
.verdict{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;
}
.verdict-out{border-color:#f0cfcd;background:linear-gradient(180deg,var(--danger-wash),#fff 62%)}
.verdict-soon{border-color:#f0dcbb;background:linear-gradient(180deg,var(--warn-wash),#fff 62%)}
.verdict-clear{border-color:#c8e6d4;background:linear-gradient(180deg,var(--ok-wash),#fff 62%)}

.verdict-kicker{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.verdict-out .verdict-kicker{color:var(--danger)}
.verdict-soon .verdict-kicker{color:var(--warn)}
.verdict-clear .verdict-kicker{color:var(--ok)}

.verdict-time{
  margin-top:8px;font-weight:900;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(1.55rem,4.3vw,2.15rem);color:var(--navy);
}
.verdict-sub{margin-top:6px;color:var(--muted);font-size:.98rem}
.verdict-why{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
  color:#4a5064;font-size:.94rem;
}
.verdict-more{margin-top:10px;font-size:.88rem;color:var(--muted)}
.verdict .badges{margin-top:14px}

.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 9px}
.dot-live{background:var(--danger);animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,31,31,.42)}55%{box-shadow:0 0 0 6px rgba(200,31,31,0)}}
@media (prefers-reduced-motion:reduce){.dot-live{animation:none}}

/* ---------- badges ---------- */
.badges{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.badge{
  display:inline-block;font-size:.71rem;font-weight:900;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.badge-rot{color:#8a4b00;background:#fdf0dc}
.badge-emg{color:#a01818;background:#fbe3e2}
.badge-mnt{color:var(--blue-dark);background:var(--blue-wash)}
.badge-possible{color:var(--warn);background:#fff;box-shadow:inset 0 0 0 1.5px #f0cd96}
.badge-confirmed{color:#fff;background:var(--navy)}
.badge-left{color:var(--danger);background:var(--danger-wash)}
.badge-town{color:#fff;background:var(--navy)}
.badge-brgy{color:var(--muted);background:#f1f3f9}

/* ---------- crumbs ---------- */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.96rem}
.crumbs a{font-weight:700;color:var(--blue-dark)}
.crumb-arrow{color:#b0b7cb}
.crumb-here{font-weight:900;color:var(--navy);letter-spacing:-.01em}
.alt-towns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-6px}
.pill{
  font-size:.82rem;font-weight:700;color:var(--navy);background:#fff;
  border:1px solid var(--line);padding:4px 11px;border-radius:999px;
}
.pill:hover{border-color:var(--blue);text-decoration:none}

/* ---------- schedule list ---------- */
.sched-list{display:flex;flex-direction:column}
.sched{display:flex;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line-soft)}
.sched:last-child{border-bottom:0}
.sched-live{background:linear-gradient(90deg,var(--danger-wash),transparent 70%)}
.sched-when{
  flex:0 0 82px;text-align:center;padding-top:2px;
}
.sched-day{
  display:block;font-weight:900;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);
}
.sched-date{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.sched-body{min-width:0;flex:1 1 auto}
.sched-time{font-weight:900;font-size:1.1rem;letter-spacing:-.01em;color:var(--text)}
.sched-dur{font-weight:400;font-size:.86rem;color:var(--muted)}
.sched-body .badges{margin-top:8px}
.sched-note{margin-top:9px;font-size:.9rem;color:#565c72}

/* ---------- barangay rows ---------- */
.brgy-list{display:flex;flex-direction:column}
.brgy-list>li{border-bottom:1px solid var(--line-soft)}
.brgy-list>li:last-child{border-bottom:0}
.brgy{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 22px;color:var(--text);text-decoration:none;
}
.brgy:hover{background:var(--blue-wash);text-decoration:none}
.brgy-main{min-width:0}
.brgy-name{display:block;font-weight:900;letter-spacing:-.01em;font-size:1.03rem;color:var(--navy)}
.brgy-meta{display:block;font-size:.86rem;color:var(--muted);margin-top:2px}
.brgy-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.chev{color:#b0b7cb;font-size:1.35rem;line-height:1}
.match-list{display:flex;flex-direction:column;margin:14px -22px -20px}
.match-list>li{border-top:1px solid var(--line-soft)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px 18px;
}
.stat-num{display:block;font-weight:900;font-size:1.9rem;letter-spacing:-.03em;color:var(--navy);line-height:1}
.stat-lbl{display:block;font-size:.82rem;color:var(--muted);margin-top:5px}
.stat-lbl i{font-style:normal}
.stat-hot .stat-num{color:var(--danger)}

/* ---------- town chips ---------- */
.townlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:16px}
.townlist.tight{margin-top:14px}
.townchip{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--text);text-decoration:none;transition:border-color .12s,transform .12s;
}
.townchip:hover{border-color:var(--blue);transform:translateY(-1px);text-decoration:none}
.townchip.is-live{border-color:#f3c9c7;background:linear-gradient(180deg,#fdf3f2,#fff)}
.townchip-name{font-weight:900;color:var(--navy);letter-spacing:-.01em}
.townchip-meta{
  display:block;font-size:.82rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.townchip-meta .dot{margin-right:5px;vertical-align:1px}

/* ---------- side cards ---------- */
.announce{background:linear-gradient(180deg,#fffaf1,#fff 46%);border-color:#f2e4cd}
.announce p{margin-top:10px;font-size:.93rem;color:#4a5064}
.announce-ico{font-size:1rem}
.disclaim p{margin-top:10px;font-size:.93rem;color:#4a5064}

.coverage-note{
  display:flex;gap:9px;font-size:.89rem;color:var(--muted);
  background:var(--blue-wash);border-radius:var(--r-sm);padding:12px 14px;
}

.install{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:14px 16px;cursor:pointer;
  background:var(--navy);color:#fff;border:0;border-radius:var(--r);
  font-weight:900;box-shadow:var(--shadow);
}
.install:hover{background:var(--navy-2)}
.install-ico{font-size:1.05rem}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#a8afdb;margin-top:auto;padding-bottom:env(safe-area-inset-bottom)}
.foot-in{padding-top:26px;padding-bottom:30px;text-align:center}
.foot-built{font-size:1.02rem;color:#fff;font-weight:400}
.foot-built strong{font-weight:900;color:#7fd7f5}
.foot-note{margin-top:6px;font-size:.83rem}
.foot-note a{color:#c3c9ec;text-decoration:underline;text-underline-offset:2px}

/* =============================================================
   Tablet
   ============================================================= */
@media (max-width:960px){
  .layout{grid-template-columns:1fr;gap:18px;padding-top:24px}
  .col-side{position:static}
}

/* =============================================================
   Mobile — its own layout, not a squeezed desktop
   ============================================================= */
@media (max-width:640px){
  :root{--bar:54px;--sbar:58px}
  body{font-size:16.5px}
  .wrap{padding:0 15px}

  .brand-mark{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .brand-mark svg{width:17px;height:27px}
  .brand-name{font-size:.99rem}
  .sync-text{display:none}
  .sync{gap:6px}
  .bar-right{gap:9px}
  .homebtn{padding:8px;gap:0}
  .homebtn span{display:none}

  .hero{padding:24px 0 28px}
  .hero::before{width:170px;right:0;top:0}
  .hero-h1{font-size:2rem;max-width:none}
  .hero-p{font-size:.96rem;margin-top:9px}

  /* compact floating pill — icon-only submit keeps it one thumb-height row */
  .search{max-width:none;padding:5px;border-radius:12px}
  .search-ico{width:32px;flex-basis:32px}
  .search input{font-size:1.02rem;padding:9px 2px}
  .search-go{width:42px;height:42px;padding:0;border-radius:9px;display:grid;place-items:center}
  .search-go span{display:none}
  .search-go::after{content:"›";font-size:1.5rem;line-height:1;margin-top:-3px}
  .suggest{border-radius:14px;max-height:56vh}
  .sg{padding:13px 15px}

  .totop{right:15px;width:44px;height:44px;bottom:calc(16px + env(safe-area-inset-bottom))}

  .layout{padding-top:20px;padding-bottom:32px;gap:14px}
  .col-main{gap:14px}

  .card-pad{padding:17px 16px}
  .card-head{padding:14px 16px}
  .verdict{padding:18px 17px}
  .verdict-time{font-size:1.62rem}
  .verdict-sub{font-size:.94rem}

  /* schedule rows become stacked blocks */
  .sched{flex-direction:column;gap:7px;padding:15px 16px}
  .sched-when{
    display:flex;align-items:baseline;gap:8px;text-align:left;flex:0 0 auto;padding-top:0;
  }
  .sched-date{margin-top:0}
  .sched-time{font-size:1.06rem}

  .brgy{padding:14px 16px;min-height:60px}
  .brgy-right .badge{display:none}
  .match-list{margin:12px -16px -17px}

  .stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{padding:12px 10px;text-align:center;display:flex;flex-direction:column;justify-content:center}
  .stat-num{font-size:1.55rem}
  .stat-lbl{font-size:.72rem;line-height:1.3;margin-top:4px}
  .stat-lbl i{display:none}

  .townlist{grid-template-columns:1fr 1fr;gap:9px}
  .townchip{padding:11px 12px}
  .townchip-name{font-size:.95rem}
  .townchip-meta{font-size:.76rem}
  /* one signal per chip on a narrow screen — the live count wins */
  .townchip.is-live .tc-up{display:none}

  .foot-in{padding-top:22px;padding-bottom:26px}
}

@media (max-width:380px){
  .townlist{grid-template-columns:1fr}
  .hero-h1{font-size:1.8rem}
}

/* Standalone (installed) tweaks */
@media (display-mode:standalone){
  .install{display:none}
  .topbar{padding-top:max(env(safe-area-inset-top),8px)}
}

@media print{
  .topbar,.hero,.col-side,.foot,.search{display:none}
  .layout{display:block;padding:0}
}