/* ================================================================
   ir-home-v2.css — IndiaRealTime Homepage "My locations" redesign
   Homepage-only stylesheet — location/service/panchang pages keep
   using ir-home.css unchanged.
   ================================================================ */

/* Color + font tokens now live in ir-tokens.css, loaded before this file. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body.ir-home-v2{font-family:var(--font-ui);background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
.ir-home-v2 button{font:inherit;cursor:pointer;border:none;background:none}
.ir-home-v2 a{text-decoration:none;color:inherit}
.ir-home-v2 ul{list-style:none}
.ir-home-v2 .wrap{max-width:900px;margin:0 auto;padding:0 16px}
.ir-home-v2 .ir-wrap{max-width:900px;margin:0 auto;padding:0 16px}

/* ── header : flat, minimal ── */
.ir-home-v2 .hdr{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.ir-home-v2 .hdr-in{display:flex;align-items:center;gap:12px;padding:12px 0}
.ir-home-v2 .mark{width:34px;height:34px;border-radius:50%;background:var(--saffron);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0}
.ir-home-v2 .tagline{font-size:12px;color:var(--ink-2)}
.ir-home-v2 .hdr-actions{margin-left:auto;display:flex;gap:4px;position:relative}
.ir-home-v2 .hbtn{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;padding:8px 13px;border-radius:8px}
.ir-home-v2 .hbtn:hover{background:#EAE8E1}
.ir-home-v2 .menu-drop{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--row);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(26,28,34,.12);min-width:180px;overflow:hidden;z-index:50}
.ir-home-v2 .menu-drop.open{display:block}
.ir-home-v2 .menu-drop a{display:block;padding:11px 16px;font-size:13.5px;font-weight:500;color:var(--ink)}
.ir-home-v2 .menu-drop a:hover{background:var(--saffron-50);color:var(--saffron)}

/* ── search + detect ── */
.ir-home-v2 .searchrow{display:flex;gap:10px;padding:18px 0 6px;position:relative}
.ir-home-v2 .search{flex:1;display:flex;align-items:center;gap:10px;background:var(--row);border:1.5px solid var(--line);border-radius:10px;padding:11px 15px}
.ir-home-v2 .search:focus-within{border-color:var(--saffron)}
.ir-home-v2 .search input{border:none;outline:none;flex:1;font:inherit;font-size:14.5px;background:none}
.ir-home-v2 .detect{display:flex;align-items:center;gap:7px;background:var(--saffron-100);color:#7A3000;border-radius:10px;padding:11px 16px;font-weight:600;font-size:13.5px;white-space:nowrap}
.ir-home-v2 .detect:hover{background:#FFD4B8}
.ir-home-v2 .sugg{display:none;position:absolute;top:calc(100% + 2px);left:0;width:100%;max-width:calc(100% - 130px);background:var(--row);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(26,28,34,.12);overflow:hidden;z-index:40;max-height:280px;overflow-y:auto}
.ir-home-v2 .sugg.open{display:block}
.ir-home-v2 .sugg li{display:flex;align-items:center;gap:9px;padding:11px 15px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line)}
.ir-home-v2 .sugg li:last-child{border-bottom:none}
.ir-home-v2 .sugg li:hover{background:var(--saffron-50)}
.ir-home-v2 .sugg mark{background:var(--saffron-100);color:#7A3000;border-radius:2px}

/* ── "My locations" list ── */
.ir-home-v2 h2{font-size:17px;font-weight:700;padding:20px 0 4px}
.ir-home-v2 .cols{display:grid;grid-template-columns:minmax(120px,1.2fr) 1fr 1fr 1fr 1fr 34px;gap:8px;align-items:center;padding:6px 14px;font-size:11.5px;color:var(--muted)}
.ir-home-v2 .cols span{text-align:center}
.ir-home-v2 .cols .first{text-align:left}
.ir-home-v2 .loc-list{display:flex;flex-direction:column;gap:8px}
.ir-home-v2 .loc{display:grid;grid-template-columns:minmax(120px,1.2fr) 1fr 1fr 1fr 1fr 34px;gap:8px;align-items:center;background:var(--row);border-radius:10px;padding:13px 14px;box-shadow:0 1px 2px rgba(26,28,34,.05)}
.ir-home-v2 .loc:hover{outline:1.5px solid var(--saffron)}
.ir-home-v2 .loc .city{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;min-width:0}
.ir-home-v2 .loc .city span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ir-home-v2 .star{color:#C9CBD6;font-size:15px;flex-shrink:0;line-height:1;padding:4px;margin:-4px}
.ir-home-v2 .star.on{color:var(--saffron)}
.ir-home-v2 .cell{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px}
.ir-home-v2 .cell .ico{font-size:17px}
.ir-home-v2 .cell .deg{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.ir-home-v2 .chip{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;border-radius:6px;padding:2.5px 8px;color:#fff}
.ir-home-v2 .c-good{background:var(--aqi-good);color:var(--aqi-good-text)}
.ir-home-v2 .c-satisfactory{background:var(--aqi-satisfactory);color:var(--aqi-satisfactory-text)}
.ir-home-v2 .c-moderate{background:var(--aqi-moderate);color:var(--aqi-moderate-text)}
.ir-home-v2 .c-poor{background:var(--aqi-poor);color:var(--aqi-poor-text)}
.ir-home-v2 .c-very-poor{background:var(--aqi-very-poor);color:var(--aqi-very-poor-text)}
.ir-home-v2 .c-severe{background:var(--aqi-severe);color:var(--aqi-severe-text)}
.ir-home-v2 .price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;color:var(--ink-2)}
.ir-home-v2 .price .dir{font-size:10px}
.ir-home-v2 .dir.up{color:var(--price-up)}.ir-home-v2 .dir.down{color:var(--price-down)} /* was inverted and reused --aqi-vp/--aqi-good — fixed */
.ir-home-v2 .warn{font-size:13px}
.ir-home-v2 .dots{color:var(--muted);text-align:center;font-weight:700}
.ir-home-v2 .add-row{display:flex;align-items:center;gap:8px;padding:11px 14px;color:var(--ink-2);font-weight:500;font-size:13.5px;border:1.5px dashed var(--line);border-radius:10px;margin-top:8px;background:transparent;width:100%;text-align:left}
.ir-home-v2 .add-row:hover{border-color:var(--saffron);color:var(--saffron)}
.ir-home-v2 .updated{font-size:11.5px;color:var(--muted);padding:8px 2px 0;font-family:var(--font-mono)}

/* ── page header (location/service/panchang pages) ── */
.ir-home-v2 .pghead{padding:18px 0 4px}
.ir-home-v2 .pghead-hd{display:flex;align-items:flex-start;gap:14px}
.ir-home-v2 .pghead-icon{font-size:32px;line-height:1;flex-shrink:0}
.ir-home-v2 .pghead h1{font-size:21px;font-weight:700;color:var(--ink);line-height:1.3}
.ir-home-v2 .pghead p{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.6}
.ir-home-v2 .pghead .fresh{font-size:11.5px;color:var(--muted);margin-top:8px;font-family:var(--font-mono)}

/* ── flat service buttons ── */
.ir-home-v2 .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 0 4px}
.ir-home-v2 .svc{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--saffron-100);color:#7A3000;font-weight:600;font-size:13.5px;border-radius:8px;padding:13px 10px;text-align:center}
.ir-home-v2 .svc:hover{background:#FFD4B8}
.ir-home-v2 .svc.soon{background:#ECEAE3;color:var(--muted)}
.ir-home-v2 .svc.active{background:var(--saffron);color:#fff}
.ir-home-v2 .svc .s{font-family:var(--font-mono);font-size:8.5px;border:1px solid currentColor;border-radius:4px;padding:1px 4px}

/* ── other services / browse ── */
.ir-home-v2 h3{font-size:15.5px;font-weight:700;padding:22px 0 10px}
.ir-home-v2 .browse{display:flex;flex-wrap:wrap;gap:8px}
.ir-home-v2 .bchip{background:var(--saffron-100);color:#7A3000;font-weight:600;font-size:12.5px;border-radius:8px;padding:9px 14px}
.ir-home-v2 .bchip:hover{background:#FFD4B8}
.ir-home-v2 .bchip small{font-weight:500;opacity:.75}
.ir-home-v2 .bchip.on{background:var(--saffron);color:#fff}
.ir-home-v2 .bchip.hidden{display:none}
.ir-home-v2 .regionrow{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:2px}

/* ── trending strip ── */
.ir-home-v2 .trend{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px 0}
.ir-home-v2 .tcell{background:var(--row);border-radius:10px;padding:11px 14px;box-shadow:0 1px 2px rgba(26,28,34,.05)}
.ir-home-v2 .tcell .l{font-size:11px;color:var(--muted)}
.ir-home-v2 .tcell .v{font-weight:700;font-size:14px;margin-top:1px}
.ir-home-v2 .tcell .v b{color:var(--saffron)}

/* ── footer ── */
.ir-home-v2 .foot{margin-top:28px;border-top:1px solid var(--line);padding:16px 0 26px;font-size:12px;color:var(--muted);line-height:1.7}
.ir-home-v2 .foot a{text-decoration:underline;text-underline-offset:2px;color:var(--ink-2)}
.ir-home-v2 .foot .links{display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:6px}
.ir-home-v2 .foot-cols{display:flex;flex-wrap:wrap;gap:28px;margin:16px 0 14px}
.ir-home-v2 .foot-cols h4{font-size:11px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.ir-home-v2 .foot-cols ul li{margin-bottom:5px}
.ir-home-v2 .foot-cols a{font-size:12.5px;color:var(--ink-2);text-decoration:none}
.ir-home-v2 .foot-cols a:hover{color:var(--saffron);text-decoration:underline}

/* ── toast (shared pattern with ir-home.js) ── */
.ir-home-v2 .ir-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 22px;border-radius:50px;font-size:13px;font-weight:500;z-index:300;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
.ir-home-v2 .ir-toast.on{opacity:1}

@media(max-width:700px){
  .ir-home-v2 .cols{display:none}
  .ir-home-v2 .loc{grid-template-columns:1fr auto auto 30px}
  .ir-home-v2 .loc .hide-m{display:none}
  .ir-home-v2 .svc-grid{grid-template-columns:repeat(2,1fr)}
  .ir-home-v2 .trend{grid-template-columns:repeat(2,1fr)}
  .ir-home-v2 .tagline{display:none}
  .ir-home-v2 .sugg{max-width:100%}
}