/* =====================================================================
   Arvie filter/date BAR — standalone island CSS
   ---------------------------------------------------------------------
   Same isolation recipe as the Filters overlay island:
     - every rule scoped under #arvie-bar (id-level specificity beats
       common.css class/element rules regardless of load order)
     - `all: revert` reset wipes inherited legacy styles
     - tokens prefixed --av-* so they cannot collide with host variables
   Light DOM, no Shadow DOM, no Bootstrap.
   ===================================================================== */

/* ---- reset ---- */
#arvie-bar,
#arvie-bar *:not(svg):not(rect):not(path):not(circle):not(polyline):not(line):not(g),
#arvie-bar *::before,
#arvie-bar *::after{
  all: revert;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#arvie-bar button{ cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
#arvie-bar svg{ display: block; overflow: visible; fill: none; }
#arvie-bar :focus-visible{ outline: 2px solid var(--av-blue); outline-offset: 2px; border-radius: 6px; }

/* ---- tokens ---- */
#arvie-bar{
  --av-bg:#F7F5F1; --av-card:#fff;
  --av-ink:#17271D; --av-muted:#586A5E;
  --av-line:#DBE2D8; --av-line-hover:#C4CEC7;
  --av-green:#2E6B45; --av-green-deep:#1F4E31; --av-green-wash:#DDEDE2; --av-green-line:#A9CBB4;
  --av-blue:#2E6E8C;
  --av-s2:8px; --av-s4:16px;
  --av-sh-sm:0 1px 2px rgba(21,39,28,.06), 0 6px 16px rgba(21,39,28,.07);
  --av-ease:cubic-bezier(0.22,1,0.36,1);
  --av-fs-2xs:.6875rem; --av-fs-sm:.875rem;
  --av-bar-h:64px;

  font-family:'Figtree', system-ui, -apple-system, sans-serif;
  color: var(--av-ink);
  line-height: 1.5;
}

/* ---- the bar ---- */
#arvie-bar .bar{
  height:var(--av-bar-h); background:var(--av-bg);
  border-bottom:1px solid var(--av-line);
  display:flex; align-items:center; gap:var(--av-s2);
  padding:0 max(12px, env(safe-area-inset-left));
  position:relative; overflow-x:auto; scrollbar-width:none;
}
#arvie-bar .bar::-webkit-scrollbar{ display:none; }

/* dates pill (desktop) */
#arvie-bar .pill{
  flex-shrink:0; display:inline-flex; align-items:center; gap:9px;
  background:var(--av-card); border:1.5px solid var(--av-line); border-radius:99px;
  padding:9px 15px; min-height:44px; font-weight:700; color:var(--av-ink); white-space:nowrap;
  box-shadow:var(--av-sh-sm); transition:border-color .15s var(--av-ease), background .15s var(--av-ease);
}
#arvie-bar .pill .lead,
#arvie-bar .pill .lead *,
#arvie-bar .msummary svg,
#arvie-bar .msummary svg *,
#arvie-bar .mfilter svg,
#arvie-bar .mfilter svg *{
  stroke: var(--av-green) !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none !important;
}
#arvie-bar .pill .lead{
  width:17px !important;
  height:17px !important;
  min-width:17px;
  min-height:17px;
  flex-shrink:0;
  overflow:visible;
  display:block;
  color: var(--av-green) !important;
}
#arvie-bar .msummary svg{ width:15px; height:15px; flex-shrink:0; }
#arvie-bar .mfilter svg{ width:15px; height:15px; flex-shrink:0; }
#arvie-bar .pill .pv{ font-size:var(--av-fs-sm); color:var(--av-ink); }
#arvie-bar .pill .cv,
#arvie-bar .pill .cv *{
  stroke: var(--av-muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#arvie-bar .pill .cv{ width:14px; height:14px; flex-shrink:0; transition:transform .2s var(--av-ease); }
#arvie-bar .pill:hover{ border-color:var(--av-line-hover); }
#arvie-bar .pill.on{ border-color:var(--av-green); background:var(--av-green-wash); }
#arvie-bar .pill.on .cv{ transform:rotate(180deg); }
#arvie-bar .pill.on .cv,
#arvie-bar .pill.on .cv *{ stroke:var(--av-green-deep); }
#arvie-bar .pill.on .pv{ color:var(--av-green-deep); }

/* dates summary (mobile) */
#arvie-bar .msummary{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  background:var(--av-card); border:1.5px solid var(--av-line); border-radius:99px;
  padding:9px 15px; min-height:44px; font-weight:700; color:var(--av-ink);
  font-size:var(--av-fs-sm); box-shadow:var(--av-sh-sm);
}
#arvie-bar .msummary .txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Filters button (both breakpoints) */
#arvie-bar .mfilter{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  background:var(--av-card); border:1.5px solid var(--av-green); border-radius:99px;
  padding:9px 15px; min-height:44px; font-weight:800; font-size:var(--av-fs-sm);
  color:var(--av-green-deep); box-shadow:var(--av-sh-sm);
}
#arvie-bar .mfilter .fc{
  background:var(--av-green); color:#fff; border-radius:99px;
  font-size:var(--av-fs-2xs); font-weight:900; padding:1px 7px; min-width:18px; text-align:center;
}

/* applied-filter chips (desktop) */
#arvie-bar .fchips{ display:none; flex-shrink:0; align-items:center; gap:8px; }
#arvie-bar .fchip-x{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--av-green-wash); color:var(--av-green-deep); border:1px solid var(--av-green-line);
  border-radius:99px; padding:6px 8px 6px 13px; font-size:var(--av-fs-sm); font-weight:700;
  white-space:nowrap; line-height:1;
}
#arvie-bar .fchip-x i{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:rgba(31,78,49,.12); font-style:normal; font-size:15px;
}
@media(hover:hover){ #arvie-bar .fchip-x:hover i{ background:rgba(31,78,49,.22); } }

#arvie-bar .bar-flex{ flex:1; }
#arvie-bar .bar-count{ flex-shrink:0; font-size:var(--av-fs-sm); font-weight:700; color:var(--av-muted); padding-right:12px; display:none; }

/* ---- responsive ---- */
@media (max-width:1023px){
  #arvie-bar .pill,
  #arvie-bar .bar-count,
  #arvie-bar .bar-flex{ display:none !important; }
  #arvie-bar .bar{ overflow-x:hidden; }
  #arvie-bar .msummary{ flex:1; min-width:0; max-width:360px; }
}
@media (min-width:1024px){
  #arvie-bar .msummary{ display:none; }
  #arvie-bar .pill.dates{ order:1; }
  #arvie-bar .mfilter{ order:2; }
  #arvie-bar .fchips{ order:3; display:inline-flex; }
  #arvie-bar .bar-flex{ order:4; }
  #arvie-bar .bar-count{ order:5; display:block; }
}