/* ============================================================
   PASSAGE by Khoshà — govbar module styles
   Everything here is namespaced gv- so it can never collide with
   styles.css. Reuses the app's tokens + existing .panel/.chip/
   .pill/.btn/.tbl classes for anything that already looks right.
   ============================================================ */

/* ---------- 1. persistent gov-links bar ---------- */
.gv-bar{
  position:relative;
  z-index:2;
  padding:0 30px 12px;
  margin-top:-6px;
}
.gv-track{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gv-track::-webkit-scrollbar{display:none}

.gv-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  color:var(--ink-faint);
  background:var(--bone);
  border:1px solid var(--stroke-soft);
  border-radius:99px;
  padding:6px 13px;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.gv-link:hover{
  color:var(--gold-deep);
  border-color:var(--gold);
  background:rgba(216,184,119,.10);
  transform:translateY(-1px);
}
.gv-link svg{
  width:11px;
  height:11px;
  opacity:.65;
  flex:0 0 auto;
  transition:opacity .2s;
}
.gv-link:hover svg{opacity:1}

.gv-link.gv-internal{
  background:transparent;
  border-style:dashed;
  color:var(--ink-faint);
}
.gv-link.gv-internal:hover{border-style:solid}
.gv-link.gv-internal.on{
  color:var(--gold-deep);
  border-style:solid;
  border-color:var(--gold);
  background:rgba(216,184,119,.14);
}

/* ---------- 2. alert bell + drawer ---------- */
.gv-alertwrap{display:flex;align-items:center}
.gv-bell{
  position:relative;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--stroke-soft);
  background:var(--bone);
  color:var(--ink-soft);
  transition:all .22s;
}
.gv-bell:hover{
  border-color:var(--gold);
  color:var(--gold-deep);
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft);
}
.gv-bell svg{width:17px;height:17px}
.gv-bell.gv-danger{
  color:var(--red);
  border-color:rgba(140,59,46,.35);
  background:rgba(140,59,46,.09);
}
.gv-badge{
  position:absolute;
  top:-3px;
  right:-3px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:99px;
  background:var(--gold-deep);
  color:#fff;
  font-size:9.5px;
  font-weight:700;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  border:2px solid var(--paper);
}
.gv-badge.gv-show{display:flex}
.gv-bell.gv-danger .gv-badge{background:var(--red)}

/* alert drawer (rendered inside the shared .m-card via openModal) */
.gv-group{margin-top:16px}
.gv-group:first-child{margin-top:2px}
.gv-group-title{
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:700;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--stroke-soft);
  display:flex;
  align-items:center;
  gap:8px;
}
.gv-group-title .hint{
  font-family:var(--body);
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  color:var(--gold-deep);
  background:rgba(169,130,76,.10);
  border-radius:99px;
  padding:1px 8px;
  font-size:10.5px;
}
.gv-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  margin-bottom:6px;
  border-radius:var(--r-sm);
  border-left:3px solid var(--stroke);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .15s;
}
.gv-row:hover{background:var(--bone);transform:translateX(2px)}
.gv-row:last-child{margin-bottom:0}
.gv-row.gv-tone-red{border-left-color:var(--red)}
.gv-row.gv-tone-amber{border-left-color:var(--gold)}
.gv-row.gv-tone-calm{border-left-color:var(--green-soft)}
.gv-row-main{flex:1;min-width:0}
.gv-row-title{
  font-weight:600;
  font-size:13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gv-row-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.gv-row-meta{flex:0 0 auto;text-align:right}
.gv-row-date{font-size:11.5px;color:var(--ink-faint)}
.gv-row-days{font-family:var(--disp);font-weight:700;font-size:12.5px;margin-top:2px;color:var(--ink-soft)}
.gv-row.gv-tone-red .gv-row-days{color:var(--red)}
.gv-row.gv-tone-amber .gv-row-days{color:var(--gold-deep)}
.gv-row.gv-tone-calm .gv-row-days{color:var(--green-soft)}
.gv-empty{text-align:center;padding:32px 10px;color:var(--ink-faint);font-size:13px}

/* ---------- 3. unemployment reference page ---------- */
.gv-rule-panel .panel-title{margin-bottom:10px}
.gv-caveat{
  margin-top:12px;
  font-size:12px;
  line-height:1.55;
  padding:10px 14px;
  border-radius:var(--r-sm);
  background:rgba(140,59,46,.07);
  color:var(--red);
  border:1px solid rgba(140,59,46,.16);
}
.gv-search{max-width:280px;flex:0 0 auto}
.gv-rate-in{
  width:76px;
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:6px 8px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  background:#fff;
  color:var(--ink);
}
.gv-rate-in:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(169,130,76,.12);
  outline:0;
}
.gv-flaglist{display:flex;flex-direction:column;gap:8px}
.gv-flagrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--stroke-soft);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .15s;
}
.gv-flagrow:hover{
  background:var(--bone);
  border-color:rgba(169,130,76,.32);
  transform:translateX(2px);
}
.gv-flagmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.gv-flagmain b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-flagsub{font-size:12px;color:var(--ink-soft)}

/* ============================================================
   mobile — bottom dock layout, bar + bell stay usable, bar
   scrolls horizontally instead of wrapping
   ============================================================ */
@media (max-width:760px){
  .gv-bar{
    padding:0 14px 8px;
    margin-top:-4px;
  }
  .gv-link{
    font-size:11px;
    padding:6px 11px;
  }
  .gv-bell{width:34px;height:34px;flex-basis:34px}
  .gv-bell svg{width:15px;height:15px}
  .gv-badge{top:-2px;right:-2px}

  .gv-row{flex-wrap:wrap}
  .gv-row-meta{
    text-align:left;
    margin-left:15px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .gv-row-date{order:1}
  .gv-row-days{margin-top:0}

  .gv-search{max-width:100%;width:100%;flex:1 1 100%}
}