/* =====================================================================
   ribbon.css — পনেরো দিনের রিবন                            v11.4.0
   ---------------------------------------------------------------------
   গত ৭ দিন · আজ · আগামী ৭ দিন, তাপ ও PM2.5 দুই ধারায়।
   app.css-এর পরে লোড হয়; নিজের সব নাম `rb-` দিয়ে শুরু, তাই পুরনো
   কোনো নিয়মের সঙ্গে ধাক্কা লাগে না।

   ⚠ রঙের নিয়ম (app.css-এর নিয়মই, নতুন কিছু নয়):
       ক্যাপসুলের রঙ = সরকারি শ্রেণি (--lvl0..4 / সার্ভারের AQI band)
       লেন-শিরোনামের বিন্দু = যন্ত্রের পরিচয়-রঙ (--inst-heat / --inst-air)
     সতর্কতার রঙ কখনো সাজসজ্জায় ব্যবহার হয় না।
   ⚠ সব রঙ টোকেন থেকে — তাই ডার্ক মোডে আলাদা কিছু লাগে না।
   ⚠ prefers-reduced-motion মানা হয়।
   ===================================================================== */

/* ---- সেকশনের পটভূমি: দুই যন্ত্রের পরিচয়-রঙে হালকা আভা ---- */
#ahead.rb-section {
  background:
    radial-gradient(60% 90% at 4% 0%,   color-mix(in srgb, var(--inst-heat) 11%, transparent), transparent 70%),
    radial-gradient(55% 80% at 98% 100%, color-mix(in srgb, var(--inst-air) 11%, transparent), transparent 70%);
  padding-bottom: 34px;
}

.rb { display: grid; gap: 14px; }

/* ---- নোটিশ ---- */
.rb-notes { display: grid; gap: 8px; }
.rb-notes:empty { display: none; }
.rb-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-radius: 14px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 13.5px; line-height: 1.5;
}
.rb-note-i {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 12px/1 'IBM Plex Mono', monospace;
  background: var(--ink-3); color: var(--surface);
}
.rb-note-warn { background: var(--lvl1-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--lvl1); }
.rb-note-warn .rb-note-i { background: var(--lvl1); color: var(--lvl1-fg); }

/* ---- লেজেন্ড ---- */
.rb-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-3); }
.rb-lg { display: inline-flex; align-items: center; gap: 7px; }
.rb-lg i { width: 12px; height: 22px; border-radius: 999px; display: inline-block; }
.rb-lg-obs i { background: linear-gradient(to top, var(--ink-3), color-mix(in srgb, var(--ink-3) 60%, #fff)); }
.rb-lg-now i { background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.rb-lg-fc  i {
  border: 1.5px dashed var(--ink-3);
  background: repeating-linear-gradient(135deg, var(--ink-3) 0 3px, transparent 3px 6px);
  opacity: .8;
}

/* ---- কাচের কার্ড ---- */
.rb-card {
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px -26px rgba(20,26,25,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: hidden;
}
:root[data-theme="dark"] .rb-card { border-color: var(--line); box-shadow: 0 18px 40px -26px rgba(0,0,0,.7); }

/* ---- ট্র্যাক: ১৫ কলাম × (দিন · তাপ · বায়ু) ---- */
.rb-scroll {
  overflow-x: auto; padding: 14px 14px 16px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.rb-track {
  position: relative; display: grid;
  grid-template-columns: repeat(15, minmax(56px, 1fr));
  grid-template-rows: auto auto 208px auto 208px;
  column-gap: 6px; row-gap: 4px;
  min-width: 960px;
}

/* আজ ও পূর্বাভাসের পটি */
.rb-band { grid-row: 1 / -1; pointer-events: none; z-index: 0; }
.rb-band-fc {
  grid-column: 9 / 16;
  border-left: 1.5px dashed var(--line-2);
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent), transparent 85%);
}
.rb-band-today {
  grid-column: 8; border-radius: 22px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 16%, transparent),
      color-mix(in srgb, var(--brand) 5%, transparent));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand) 50%, transparent),
              0 14px 34px -14px color-mix(in srgb, var(--brand) 65%, transparent);
}

/* দিনের শিরোনাম */
.rb-day {
  grid-column: var(--col); grid-row: 1; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 0 4px; line-height: 1.15; color: var(--ink-3);
  cursor: pointer; border-radius: 14px;
}
.rb-day small { font-size: 12px; }
.rb-day b { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rb-day.rb-now small { color: var(--brand-ink); font-weight: 700; }
.rb-day.rb-now b { color: var(--brand-ink); }
.rb-day.is-sel b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* লেনের শিরোনাম — ছোট পর্দায় স্ক্রল করলেও বাঁয়ে আটকে থাকে */
.rb-lane { grid-column: 1 / -1; z-index: 1; padding-top: 8px; }
.rb-lane-heat { grid-row: 2; }
.rb-lane-air  { grid-row: 4; }
.rb-lane-in {
  position: sticky; left: 4px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  max-width: min(720px, calc(100vw - 64px));
}
.rb-lane-in i { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.rb-lane-heat i { background: var(--inst-heat); box-shadow: 0 0 0 4px var(--inst-heat-soft); }
.rb-lane-air  i { background: var(--inst-air);  box-shadow: 0 0 0 4px var(--inst-air-soft); }
.rb-lane-in b { font-size: 15px; letter-spacing: -.01em; }
.rb-lane-in small { color: var(--ink-3); font-size: 12px; }

/* ---- একটি ক্যাপসুল-কলাম ---- */
.rb-c {
  grid-column: var(--col); z-index: 1;
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 2px 6px; border-radius: 18px; min-height: 0;
  scroll-snap-align: center;
  transition: background .18s ease, transform .18s ease;
}
.rb-heat { grid-row: 3; }
.rb-air  { grid-row: 5; }
.rb-c:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rb-c:active { transform: scale(.98); }
.rb-c:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.rb-c.is-sel { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1.5px var(--ink-2); }

.rb-v {
  font-size: 16px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.rb-now .rb-v { font-size: 18px; }

.rb-cap {
  position: relative; flex: 1 1 auto; width: 26px; min-height: 60px;
  border-radius: 999px; overflow: hidden;
  background: var(--surface-3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.10);
}
.rb-now .rb-cap { width: 34px; }

.rb-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 0%);
  border-radius: 999px;
  background: linear-gradient(to top, var(--tone), color-mix(in srgb, var(--tone) 72%, #fff));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
  transform-origin: bottom center;
  animation: rb-rise .8s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 32ms);
}
@keyframes rb-rise { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }

/* পূর্বাভাস — ডোরাকাটা ভরাট, কাটা সীমানা: মাপা থেকে আলাদা গঠনে */
.rb-fc .rb-cap { background: transparent; box-shadow: none; border: 1.5px dashed var(--line-2); }
.rb-fc .rb-fill {
  background: repeating-linear-gradient(135deg,
      var(--tone) 0 6px, color-mix(in srgb, var(--tone) 45%, transparent) 6px 12px);
  box-shadow: none; opacity: .92;
}
.rb-fc .rb-v { font-style: italic; }

/* আজ, শুধু মাপা: ক্যাপসুলে হালকা দ্যুতি */
.rb-now:not(.rb-fc) .rb-cap { box-shadow: inset 0 1px 3px rgba(0,0,0,.10), 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }

/* আংশিক দিন (আজ চলছে, বা মাত্র কয়েক ঘণ্টার তথ্য) — মাথায় ছোট বিন্দু */
.rb-part .rb-v::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 4px;
  border-radius: 50%; border: 1.5px solid var(--ink-3); vertical-align: middle;
}

/* তথ্য নেই — ফাঁকা ভূত-ক্যাপসুল */
.rb-empty .rb-v { color: var(--ink-3); font-weight: 400; }
.rb-empty .rb-cap { background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none; opacity: .6; }

.rb-s { min-height: 20px; display: flex; align-items: center; justify-content: center; }
.rb-feel { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rb-aqi {
  font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px;
  background: var(--tone); color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- চিপ: সামনের সাত দিনের সারকথা ---- */
.rb-ins-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-ins-row:empty { display: none; }
.rb-ins {
  appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); font-size: 13px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rb-ins:hover { transform: translateY(-1px); border-color: var(--line-2); box-shadow: 0 6px 16px -10px rgba(20,26,25,.4); }
.rb-ins:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.rb-ins i { width: 11px; height: 11px; border-radius: 50%; background: var(--tone); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 25%, transparent); }
.rb-ins b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- নির্বাচিত দিনের বিস্তারিত ---- */
.rb-detail { padding: 18px 18px 20px; }
.rb-d-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.rb-d-top h3 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.rb-badge {
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
}
.rb-b-now { background: var(--brand-soft); color: var(--brand-ink); }
.rb-b-fc  { background: transparent; color: var(--ink-2); border: 1.5px dashed var(--line-2); }

.rb-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .rb-d-grid { grid-template-columns: 1fr; } }

.rb-d-card {
  position: relative; padding: 16px 18px 14px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: inset 4px 0 0 var(--acc, var(--line-2));
}
.rb-d-heat { --acc: var(--inst-heat); }
.rb-d-air  { --acc: var(--inst-air); }
.rb-d-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.rb-d-t { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rb-d-t i { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); }
.rb-chip {
  font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--tone); color: var(--fg);
}
.rb-d-big {
  margin: 10px 0 0; font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.rb-d-big sup { font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 4px; vertical-align: top; position: relative; top: 6px; letter-spacing: 0; }
.rb-d-cap { margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-3); }
.rb-d-dl { margin: 0; display: grid; gap: 0; }
.rb-d-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rb-d-dl dt { color: var(--ink-3); }
.rb-d-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.rb-d-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.rb-d-none { background: transparent; border-style: dashed; box-shadow: none; }
.rb-d-empty { margin: 14px 0 6px; color: var(--ink-3); font-size: 14px; }
.rb-fail { color: var(--ink-3); padding: 16px 4px; }

/* ---- ছোট পর্দা ---- */
@media (max-width: 600px) {
  .rb-scroll { padding: 10px 8px 12px; }
  .rb-track { grid-template-columns: repeat(15, 58px); min-width: 0; width: max-content; }
  .rb-d-big { font-size: 40px; }
  .rb-detail { padding: 14px 12px 16px; }
}

/* ---- নড়াচড়া কমানো ---- */
@media (prefers-reduced-motion: reduce) {
  .rb-fill { animation: none; }
  .rb-c, .rb-ins { transition: none; }
}


/* =====================================================================
   হিরো কার্ড — হালকা পালিশ (নতুন কিছু যোগ নয়, আগের কার্ডেরই নরম রূপ)
   ---------------------------------------------------------------------
   ⚠ রঙিন আভা কেবল **পরিচয়-রঙ** (--inst-heat / --inst-air), সতর্কতার
     রঙ নয়। উপরের পটির রঙ আগের মতোই JS বসায় — আজকের সর্বোচ্চ মান থেকে।
   ===================================================================== */
.now {
  background:
    radial-gradient(60% 120% at 0% 0%,   color-mix(in srgb, var(--inst-heat) 9%, transparent), transparent 62%),
    radial-gradient(55% 110% at 100% 0%, color-mix(in srgb, var(--inst-air) 9%, transparent),  transparent 62%);
}
.inst { border-radius: 22px; }
.inst-heat { --acc: var(--inst-heat); }
.inst-air  { --acc: var(--inst-air); }
.inst::after {
  content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 20%, transparent), transparent);
}
.inst > * { position: relative; z-index: 1; }
.inst > .inst-top { z-index: 2; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .big-n {
    background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--acc) 55%, var(--ink)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.inst-top { border-radius: 0 0 6px 6px; }