/* ============================================================
   Mythox — reusable page-header UI (Phase 1)
   The small rounded top-right header button (.cos-hbtn) + its row
   (.cos-hrow) + the anchored Midas-style popover (#cos-pop).
   ============================================================ */

/* right-aligned cluster for a page header's actions */
.cos-hrow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* the small rounded header button */
.cos-hbtn {
  height: 34px; min-width: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 9px;
  background: var(--surface-2, #151B1C);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 999px;
  color: var(--text, #F3F7EF);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: background .12s var(--ease, ease), border-color .12s, color .12s, transform .12s;
}
.cos-hbtn:hover { background: var(--surface-3, #1C2425); border-color: var(--accent, #C6FF3F); }
.cos-hbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft, rgba(198,255,63,.2)); }
.cos-hbtn:active { transform: translateY(1px); }
.cos-hbtn.active { border-color: var(--accent, #C6FF3F); color: var(--accent, #C6FF3F); }
.cos-hbtn .cos-hbtn-ic { font-size: 15px; line-height: 1; display: inline-flex; }
.cos-hbtn-lbl { padding: 0 13px; }

/* the anchored popover */
#cos-pop {
  position: fixed;
  z-index: 99998;                 /* under the date-picker (100000), above modules */
  width: 300px; max-width: calc(100vw - 16px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .14s var(--ease, ease), transform .14s var(--ease, ease);
}
#cos-pop.open { opacity: 1; transform: translateY(0); }
#cos-pop .cos-pop-card {
  background: var(--surface, #0E1213);
  border: 1px solid var(--line-2, rgba(255,255,255,.12));
  border-radius: var(--radius, 14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  overflow: hidden;
}
#cos-pop .cos-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
#cos-pop .cos-pop-kick {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, rgba(243,247,239,.62));
}
#cos-pop .cos-pop-x {
  width: 26px; height: 26px; border-radius: 8px; line-height: 1;
  background: transparent; border: 1px solid transparent; color: var(--muted, rgba(243,247,239,.62));
  font-size: 18px; cursor: pointer;
}
#cos-pop .cos-pop-x:hover { background: var(--surface-2, #151B1C); color: var(--text, #F3F7EF); }
#cos-pop .cos-pop-body { padding: 14px; font-size: 13.5px; color: var(--text, #F3F7EF); }
#cos-pop .cos-pop-body .btn-gold,
#cos-pop .cos-pop-body .cos-hbtn { margin-top: 4px; }